/* Tabs
   ========================================================================== */

/**
 * jQuery UI Tabs.
 *
 * Some classes and HTML elements generally added via JavaScript, more info -
 * https://jqueryui.com/tabs/
 *
 * Example HTML:
 *
 * <div class="ui-tabs>
 *     <ul class="ui-tabs-nav">
 *         <li class="ui-tabs-active">
 *             <a class="ui-tabs-anchor">Tab 1</a>
 *         </li>
 *         <li>
 *             <a class="ui-tabs-anchor">Tab 2</a>
 *         </li>
 *         <li>
 *             <a class="ui-tabs-anchor">Tab 3</a>
 *         </li>
 *     </ul>
 *     <div class="ui-tabs-panel" aria-expanded="true">
 *         Tab 1 content
 *     </div>
 *     <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true">
 *         Tab 2 content
 *     </div>
 *     <div class="ui-tabs-panel aria-expanded="false" aria-hidden="true">
 *         Tab 3 content
 *     </div>
 * </div>
 */

.ui-tabs {
    border: 0;

    .ui-tabs-nav {
        padding: 0;
        background: none;

        &:not(.switcher-list) .ui-tabs-anchor {
            color: $color-text;
            text-decoration: none;
        }

        .ui-tabs-anchor {
            display: block;
            padding: 0.38461538461538em 1em;
        }

        li {
            &.ui-state-disabled .ui-tabs-anchor,
            &.ui-tabs-loading .ui-tabs-anchor {
                cursor: text;
            }
        }

        .ui-state-focus a {
            outline: thin solid $color-link-focus;
        }
    }

    .ui-tabs-panel {
        display: block;
        margin: 0 0 1em;
        padding: 1px 0;
        border-width: 1px 0;
        background: none;
    }
}

@include dark-mode {
    .ui-tabs {
        .ui-tabs-nav {
            background: $dark-color-background;

            &:not(.switcher-list) .ui-tabs-anchor {
                color: $dark-color-text;
            }

            .ui-state-focus a {
                outline: thin solid $dark-color-link-focus;
            }
        }
    }
}

.ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav {
    height: 31px;

    li {
        display: inline-block;
        height: 30px;
        border-bottom-width: 0;
        list-style: none;
        white-space: nowrap;

        @if $flat-theme < 1 {
            box-shadow: inset 0 -0.2em 0.4em rgba(#666666, 0.15);
        }

        &.ui-tabs-active {
            margin-bottom: -1px;
            padding-bottom: 1px;

            @if $flat-theme < 1 {
                box-shadow: none;
            }
        }
    }
}

@if $flat-theme < 1 {
    @include dark-mode {
        .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav li {
            box-shadow: inset 0 -0.25em 0.5em rgba(#000000, 0.4);

            &.ui-tabs-active {
                box-shadow: none;
            }
        }
    }
}

/**
 * Maintain cursor style when collapsing a collapsible tab.
 */

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    cursor: pointer;
}

/**
 * Additonal styling for tabs vertical.
 */

.ui-tabs-vertical {
    .ui-tabs-nav {
        border-bottom: 1px solid $color-border-light;

        li {
            display: block;
            border: 1px solid $color-border-light;
            border-bottom: 1px solid transparent;
        }
    }

    .ui-tabs-panel {
        border-top-width: 0;
    }
}

@include dark-mode {
    .ui-tabs-vertical .ui-tabs-nav {
        border-bottom-color: $dark-color-border-light;

        li {
            border-color: $dark-color-border-light;
            border-bottom-color: transparent;
        }
    }
}

.txp-details .ui-tabs-nav {
    border-bottom: 0;

    li {
        border-right: 0;
        border-left: 0;

        &:first-child {
            border-top: 0;
        }
    }
}