/* ============================================================================
   06-COMPONENTS -> #TABS
   ========================================================================= */

/**
 * A way of navigating between multiple panels, reducing clutter and fitting
 * more into a smaller space.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Tabs
 */

.tabs {
    --tabs-nav-border-color: var(--border-color-secondary);
    --tabs-nav-border-width: var(--border-width);
    --tabs-nav-scrollbar-bg: var(--border-color-primary);
    --tabs-nav-scrollbar-width: var(--space-1);
    --tabs-item-border-width: .125rem;
    --tabs-item-color: var(--text-color-tertiary);
    --tabs-item-hover-border-color: var(--link-color);
    --tabs-item-hover-color: var(--link-color);
    --tabs-item-active-border-color: var(--link-color);
    --tabs-item-active-color: var(--link-color);

    width: 100%;
}


/**
 * Tabs nav
 */

.tabs__nav {
    column-gap: var(--space-4);
    display: flex;
    flex-direction: revert;
    flex-wrap: nowrap;
    margin-bottom: var(--space-8);
    overflow-x: auto;
    padding-bottom: var(--tabs-nav-scrollbar-width);
    position: relative;
    width: 100%;
    z-index: var(--z-index-10);

    &::before {
        background-color: var(--tabs-nav-border-color);
        bottom: var(--tabs-nav-scrollbar-width);
        content: '';
        height: var(--tabs-nav-border-width);
        left: 0;
        position: absolute;
        width: 100%
    }

    &::-webkit-scrollbar {
        height: var(--tabs-nav-scrollbar-width);
    }
    
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
        background: var(--tabs-nav-scrollbar-bg);
        border-radius: calc(var(--tabs-nav-scrollbar-width) / 2);
    }
}


/**
 * Tabs nav item
 *
 * 1. Set 'flex-shrink' to '0' to avoid tab item text spanning multiple lines.
 */

.tabs__nav-item {
    @include font-size('sm');
    @include transition(('color'));
    appearance: none;
    background-color: transparent;
    border: 0;
    color: var(--tabs-item-color);
    cursor: pointer;
    flex-shrink: 0; // [1]
    font-weight: var(--font-weight-semi-bold);
    padding: var(--space-3);
    position: relative;

    &::after {
        @include transition(('opacity'));
        background-color: var(--tabs-item-active-border-color);
        bottom: 0;
        content: '';
        height: var(--tabs-item-border-width);
        left: 0;
        opacity: 0;
        position: absolute;
        width: 100%;
    }

    &:hover {
        color: var(--tabs-item-active-color);

        &::after {
            opacity: 1;
        }
    }

    &[aria-selected=true] {
        color: var(--tabs-item-active-color);

        &::after {
            opacity: 1;
        }
    }
}


/**
 * Tabs content item
 */

.tabs__panel {
    & > :last-child {
        margin-bottom: 0;
    }
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Modal tabs
 */

.tabs[data-view=modal] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    height: 100%;

    .tabs__nav {
        margin-bottom: 0;
        padding-top: var(--card-padding-y);
        padding-left: var(--card-padding-x);
        padding-right: var(--card-padding-x);
    }

    .tabs__panel {
        height: 100%;
        overflow-y: auto;
    }
}