/* ------------------------------------------------------------ *\
	Field - Complex
\* ------------------------------------------------------------ */

/*  Base  */

.carbon-Complex > .help-text { margin-top: 5px; }
.carbon-Complex > .carbon-error { display: none; }

/*  Sub Container  */

.carbon-subcontainer > .carbon-actions { position: relative; display: inline-block; vertical-align: top; }
.carbon-subcontainer > .carbon-actions .carbon-button { display: inline-block; vertical-align: top; float: none; }

.carbon-subcontainer > .carbon-empty-row { display: none; }
.carbon-subcontainer > .carbon-empty-row-visible { display: block; }
.carbon-subcontainer > .carbon-empty-row-visible ~ .carbon-actions { display: block; }
.carbon-subcontainer > .carbon-empty-row-visible ~ .groups-wrapper { display: none; }


/*  Main Components  */

.carbon-groups-holder .carbon-row { position: relative; margin-bottom: 10px; box-shadow: 0 1px 0 0 rgba(0,0,0,.05); }
.carbon-groups-holder .carbon-row:last-child { margin-bottom: 0; }
.carbon-groups-holder .carbon-subrow { margin-bottom: 0; box-shadow: none; }

.carbon-groups-holder .ui-sortable-helper { border-color: $color-border-darker; opacity: .8; }
.carbon-groups-holder .ui-placeholder-highlight { height: 42px; margin-bottom: 10px; border: 1px dashed $color-border-darker; }

.carbon-groups-holder .carbon-group-actions { position: absolute; right: 12px; top: 12px; font-size: 0; }
.carbon-groups-holder .carbon-group-actions a { display: inline-block; vertical-align: top; margin-left: 12px; color: $color-grey-font; text-decoration: none; font-size: 0; line-height: 0; text-indent: -4004px; }
.carbon-groups-holder .carbon-group-actions a:first-child { margin-left: 0; }
.carbon-groups-holder .carbon-group-actions a:last-child { margin-left: 8px; }
.carbon-groups-holder .carbon-group-actions a:hover { color: $color-border-darkgrey; }
.carbon-groups-holder .carbon-group-actions a:focus { box-shadow: none; outline: none; }
.carbon-groups-holder .carbon-group-actions a:before { display: block; text-indent: 0; }

.carbon-groups-holder .collapsed .carbon-btn-collapse:before { content: '\f140'; }

.carbon-groups-holder .carbon-group-actions .carbon-btn-remove:hover { color: $color-border-darkgrey; }

.carbon-groups-holder .fields-container { border-width: 0 1px 0 1px; border-style: solid; border-color: $color-border; }


/*  Drag Handle  */

.carbon-drag-handle { position: relative; min-height: 1.5em; padding: 12px 90px 12px 54px; background: $color-grey-bg; border: 1px solid $color-border; cursor: move; font-size: 12px; font-weight: 600; line-height: 1.5; color: $color-label; }
.carbon-drag-handle:hover { border-color: $color-border-active; }
.carbon-drag-handle .group-number { position: absolute; left: 0; top: 0; width: 43px; height: 100%; line-height: 42px; border-right: 1px solid $color-border; text-align: center; }


/*  Tabs  */

.group-tabs-nav-holder { display: inline-block; vertical-align: top; position: relative; padding-right: 36px; }
.group-tabs-nav-holder > .carbon-actions { position: absolute; right: 0; bottom: -1px; }
.group-tabs-nav-holder > .carbon-actions .carbon-button { margin-top: 0; }
.group-tabs-nav-holder > .carbon-actions .button { width: 36px; height: 36px; padding: 0; line-height: 28px; background: $color-grey-bg; border: 1px solid $color-border; border-radius: 0; box-shadow: none; text-align: center; font-size: 24px; font-weight: 600; color: $color-label; }
.group-tabs-nav-holder > .carbon-actions .button:active { transform: none; }
.group-tabs-nav-holder > .carbon-actions .button:hover { color: $color-blue-font; }

.group-tabs-nav-holder ~ .carbon-groups-holder { border-top: 1px solid $color-border; }

.group-tabs-nav-holder ~ .carbon-groups-holder > .carbon-row > .carbon-drag-handle { display: none; }

.group-tabs-nav-holder ~ .carbon-groups-holder > .carbon-row { margin-bottom: 0; display: none !important; }
.group-tabs-nav-holder ~ .carbon-groups-holder > .carbon-row.active { display: block !important; display: flex !important; flex-direction: column; }


/*  Tabs Nav  */

.group-tabs-nav-holder .group-tabs-nav { margin-bottom: -3px; list-style: none outside none; }
.group-tabs-nav-holder .group-tabs-nav li { display: inline-block; vertical-align: top; margin-right: 6px; margin-bottom: 2px; }
.group-tabs-nav-holder .group-tabs-nav li a { position: relative; display: block; max-width: 140px; padding: 8px 12px; background: $color-grey-bg; border: 1px solid $color-border; color: $color-label; font-size: 12px; font-weight: 600; line-height: 1.5; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-tabs-nav-holder .group-tabs-nav li a:hover { background: #fff; }
.group-tabs-nav-holder .group-tabs-nav li a:focus { box-shadow: none; outline: none; }

.group-tabs-nav-holder .group-tabs-nav .group-name + .group-number { display: none; }
.group-tabs-nav-holder .group-tabs-nav .carbon-complex-group-error-badge { position: absolute; right: 0; top: 50%; margin-top: -6px; color: $color-state-error; font-size: 12px; line-height: 1; visibility: hidden; }
.group-tabs-nav-holder .group-tabs-nav .ui-placeholder-highlight { height: 33px; margin-bottom: 0; border: 1px dashed $color-border-darker; }

.group-tabs-nav-holder .group-tabs-nav .active a { background: #fff; border-bottom-color: #fff; }

.group-tabs-nav-holder .group-tabs-nav .carbon-complex-group-has-error a { padding-right: 20px; color: $color-state-error; }
.group-tabs-nav-holder .group-tabs-nav .carbon-complex-group-has-error .carbon-complex-group-error-badge { visibility: visible; }


/*  Tabbed Layout  */

.layout-tabbed-horizontal > .carbon-groups-holder > .carbon-row,
.layout-tabbed-vertical > .carbon-groups-holder > .carbon-row { position: relative; padding-bottom: 36px; }

.carbon-groups-holder .carbon-group-actions-tabbed-horizontal,
.carbon-groups-holder .carbon-group-actions-tabbed-vertical { position: absolute; top: auto; right: 0; left: 0; bottom: 0; height: 36px; padding: 0 12px; background: $color-grey-bg; border: 1px solid $color-border; }

.carbon-groups-holder .carbon-group-actions-tabbed-horizontal a,
.carbon-groups-holder .carbon-group-actions-tabbed-vertical a { display: inline-block; padding: 9px 0; font-size: 12px; line-height: 1.5; text-indent: 0; color: $color-blue-font; }

.carbon-groups-holder .carbon-group-actions-tabbed-horizontal a:before,
.carbon-groups-holder .carbon-group-actions-tabbed-vertical a:before { display: none; }

.carbon-groups-holder .carbon-group-actions-tabbed-horizontal a:hover,
.carbon-groups-holder .carbon-group-actions-tabbed-vertical a:hover { color: $color-label; }

.carbon-groups-holder .carbon-group-actions-tabbed-horizontal .carbon-btn-collapse,
.carbon-groups-holder .carbon-group-actions-tabbed-vertical .carbon-btn-collapse { display: none; }

.carbon-groups-holder .carbon-group-actions-tabbed-horizontal .carbon-btn-remove,
.carbon-groups-holder .carbon-group-actions-tabbed-vertical .carbon-btn-remove { color: $color-darkred-font; }

.carbon-empty-row:not(.carbon-empty-row-visible) ~ .layout-tabbed-horizontal + .carbon-actions,
.carbon-empty-row:not(.carbon-empty-row-visible) ~ .layout-tabbed-vertical + .carbon-actions { display: none !important; }


/*  Vertical Tabbed Layout  */

.layout-tabbed-vertical { display: flex; }

.layout-tabbed-vertical > .group-tabs-nav-holder { flex: 0 0 20%; padding: 0; margin: 0; }
.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav { border-bottom: 1px solid $color-border; }
.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav li { display: block; width: auto; margin-right: 0; margin-bottom: 0; }
.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav a { padding-left: 20px; margin-right: -1px; max-width: none; border-bottom: 0; white-space: normal; }
.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav .active a { position: relative; z-index: 5; border-right-color: #fff; }

.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav .group-handle { position: absolute; left: 4px; top: 50%; display: block; width: 6px; padding: 3px 0; margin-top: -5px; border-width: 1px 0; border-style: solid; border-color: $color-border-darker; cursor: move; }
.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav .group-handle:before { content: ''; position: absolute; top: -8px; bottom: -8px; left: -2px; right: -2px; }
.layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav .group-handle:after { content: ''; display: block; height: 1px; background: $color-border-darker; }

.layout-tabbed-vertical > .group-tabs-nav-holder .carbon-actions { position: static; }
.layout-tabbed-vertical > .group-tabs-nav-holder .carbon-button { float: none; }
.layout-tabbed-vertical > .group-tabs-nav-holder .carbon-actions .button { position: relative; z-index: 10; display: block; width: auto; margin-right: -1px; }

.layout-tabbed-vertical > .carbon-groups-holder { flex: 0 0 80%; }

.layout-tabbed-vertical .group-tabs-nav .ui-placeholder-highlight { height: 33px; }

/*  Max Reached  */

.max-reached > .carbon-subcontainer > .groups-wrapper > .carbon-groups-holder > .carbon-group-row > .carbon-group-actions > .carbon-btn-duplicate { display: none; }
.max-reached > .carbon-subcontainer > .groups-wrapper > .carbon-groups-holder > .carbon-group-row > .carbon-group-actions > .carbon-btn-duplicate + .carbon-btn-remove { margin-left: 0; }


/*  Right-to-Left  */

.rtl .carbon-groups-holder .carbon-group-actions { left: 12px; right: auto; }
.rtl .carbon-groups-holder .carbon-group-actions a { margin-left: 0; margin-right: 10px; }

.rtl .carbon-groups-holder .carbon-group-actions-tabbed-horizontal,
.rtl .carbon-groups-holder .carbon-group-actions-tabbed-vertical { left: 0; right: 0; }

.rtl .carbon-drag-handle { padding-left: 90px; padding-right: 54px; }
.rtl .carbon-drag-handle .group-number { left: auto; right: 0; border-right: 0; border-left: 1px solid $color-border; }

.rtl .layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav a,
.rtl .layout-tabbed-vertical > .group-tabs-nav-holder .carbon-actions .button { margin-left: -1px; margin-right: 0; }

.rtl .layout-tabbed-vertical > .group-tabs-nav-holder .group-tabs-nav .active a { border-right-color: $color-border; border-left-color: #fff; }


@media screen and (max-width: 782px) {
	.group-tabs-nav-holder { display: none; }

	.group-tabs-nav-holder ~ .carbon-groups-holder { border-top: 0; }
	.group-tabs-nav-holder ~ .carbon-groups-holder > .carbon-row { display: block !important; margin-bottom: 10px; }
	.group-tabs-nav-holder ~ .carbon-groups-holder > .carbon-row:last-child { margin-bottom: 0; }
	.group-tabs-nav-holder ~ .carbon-groups-holder > .carbon-row > .carbon-drag-handle { display: block; }

	.carbon-empty-row:not(.carbon-empty-row-visible) ~ .layout-tabbed-horizontal + .carbon-actions,
	.carbon-empty-row:not(.carbon-empty-row-visible) ~ .layout-tabbed-vertical + .carbon-actions { display: inline-block !important; }

	.layout-tabbed-horizontal > .carbon-groups-holder > .carbon-row,
	.layout-tabbed-vertical > .carbon-groups-holder > .carbon-row { padding-bottom: 0; }

	.layout-tabbed-vertical { display: block; }
	.layout-tabbed-vertical > .carbon-groups-holder { width: auto; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical { height: auto; padding: 0; right: 12px; top: 12px; bottom: auto; left: auto; background: none; border: 0; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal a,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical a { display: inline-block; padding: 0; line-height: 1.5; text-indent: 0; color: $color-grey-font; font-size: 0; line-height: 0; text-indent: -4004px; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal a:hover,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical a:hover { color: $color-blue-font; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal a:before,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical a:before { display: block; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal .carbon-btn-collapse,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical .carbon-btn-collapse { display: inline-block; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal .carbon-btn-remove,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical .carbon-btn-remove { color: $color-grey-font; }

	.carbon-groups-holder .carbon-group-actions-tabbed-horizontal .carbon-btn-remove:hover,
	.carbon-groups-holder .carbon-group-actions-tabbed-vertical .carbon-btn-remove:hover { color: $color-darkred-font; }

	.rtl .carbon-groups-holder .carbon-group-actions-tabbed-horizontal,
	.rtl .carbon-groups-holder .carbon-group-actions-tabbed-vertical { left: 12px; right: auto; }
}