/* ------------------------------------------------------------ *\
	Containers
\* ------------------------------------------------------------ */

.carbon-container ul,
.carbon-container li { margin: 0; padding: 0; }
.carbon-container p { margin: 0; padding: 0 0 3px; font-style: normal; }
.carbon-container h3 { font-size: 17px; font-weight: 200; margin: 0 0 4px; color: $color-label; }
.carbon-container label { display: block; padding: 2px 0; color: $color-label; }

.carbon-container .carbon-button { margin-top: 15px; }

.carbon-container .help-text,
.carbon-container .description { display: block; padding-top: 3px; padding-bottom: 1px; font-style: italic; }

.carbon-container-Widget .collapsed > .fields-container,
.carbon-fields-collection .collapsed > .fields-container { display: none; }

.carbon-fields-collection  { padding-bottom: 20px; }

.carbon-fields-row > .carbon-field { min-width: 100%; }

.carbon-grid .carbon-field + .carbon-field,
.carbon-grid .carbon-field + .carbon-fields-row,
.carbon-grid .carbon-fields-row + .carbon-row { border-top: 1px solid $color-border; }


/*  Error State  */

.carbon-container .carbon-error { position: absolute; left: 50%; bottom: 100%; padding: 4px 8px; margin-bottom: 8px; border-radius: 2px; background: $color-state-error; color: #fff; font-style: normal; font-size: 12px; transform: translateX(-50%); visibility: hidden; opacity: 0; }
.carbon-container .carbon-error:after { content: ''; position: absolute; left: 50%; top: 100%; border-width: 5px 5px 0; margin-left: -5px; border-style: solid; border-color: $color-state-error transparent; }

.carbon-container .carbon-highlight { position: relative; outline: 1px solid $color-state-error; outline-offset: -1px; border-color: $color-state-error; }

.carbon-container .carbon-highlight > label { color: $color-state-error; }
.carbon-container .carbon-highlight > .carbon-error { visibility: visible; opacity: 1; }


@media screen and (min-width: $breakpoint-desktop-min) {
	.carbon-grid .carbon-fields-row:first-child { border-top: 0; }
	.carbon-grid .carbon-fields-row { display: table; width: 100%; border-bottom: 1px solid $color-border; }
	.carbon-grid .carbon-fields-row > .carbon-field { display: table-cell; min-width: 0; vertical-align: top; border: 0; }
	.carbon-grid .carbon-fields-row > .carbon-field + .carbon-field { border-left: 1px solid $color-border; }
}


/* ------------------------------------------------------------ *\
	Table Layout
\* ------------------------------------------------------------ */

.carbon-table-row > td { padding: 0; }
.carbon-table-row .container-holder > .carbon-tabs > .carbon-tabs-nav { background: transparent; }


@media screen and (min-width: $breakpoint-tablet-min) {
	.carbon-table-row .carbon-container > .carbon-fields-row > .carbon-field > label,
	.carbon-table-row .carbon-container > .carbon-field > label { position: absolute; left: 0; }
	.carbon-table-row .carbon-container > .carbon-highlight { position: static; }
	.carbon-table-row .carbon-container > .carbon-highlight > .carbon-error { position: static; display: inline-block; vertical-align: top; transform: none; margin: 5px 0 0; }
	.carbon-table-row .carbon-container > .carbon-highlight > .carbon-error:after { content: none; }

	.carbon-table-row .carbon-container > .carbon-fields-row > .carbon-field.has-width > label,
	.carbon-table-row .carbon-container > .carbon-field.has-width > label { position: static; }

	.carbon-table-row .carbon-fields-row { display: table; width: 100%; }
	.carbon-table-row .carbon-field.has-width { display: table-cell; width: 100%; }
}

@media screen and (max-width: $breakpoint-mobile-max) {
	.carbon-table-row .carbon-container { margin-left: -10px; }
}


/* ------------------------------------------------------------ *\
	Tabs
\* ------------------------------------------------------------ */

.carbon-tabs { margin: 0; }

.carbon-tabs .carbon-tab { display: none; }

.carbon-tabs .carbon-tab.active { display: block; }
.carbon-tabs .carbon-tabs-body { margin-top: 1px }

.carbon-tabs-nav { border-bottom: solid 1px $color-border; padding: 12px 10px 0; margin: 0 0 -1px; background: $color-grey-bg; font-size: 0; }

.carbon-tabs-nav li { display: inline-block; vertical-align: top; margin: 0 6px -1px 0; }
.carbon-tabs-nav li a { display: block; padding: 8px 12px; border: solid 1px $color-border; background: $color-grey-bg; color: $color-label; font-size: 12px; line-height: 1.5; text-decoration: none; font-weight: 600; }

.carbon-tabs-nav li a:hover { background: #fff; }

.carbon-tabs-nav li a:focus,
.carbon-tabs-nav li a:active { outline: none; box-shadow: none; }

.carbon-tabs-nav .active a { text-decoration: none; background: #fff; border-bottom-color: #fff; }

.carbon-tabs-nav .active a:focus,
.carbon-tabs-nav .active a:active { box-shadow: none; }

@media screen and (max-width: $breakpoint-mobile-landscape) {
	.carbon-tabs.carbon-tabs-stacked .carbon-tabs-nav li { display: block; margin-right: 8px; }
	.carbon-tabs.carbon-tabs-stacked .carbon-tabs-nav li a { display: block; }
}