@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;

//EXPORT TO MOLECULE
.cds-tabgroup {
    display: flex;
    flex-direction: row;
    box-shadow: inset 0px -1px 0px 0px var(--cds-color-border-default);
    //border-bottom: 1px solid var(--cds-color-border-default);
    width: 100%;

    overflow: auto;
    -webkit-overflow-scrolling: touch;
    
}

//ATOM
.cds-tab {
    border-radius: 8px 8px 0 0;
    border: 0;
    padding: vars.$cds-spacing-75 vars.$cds-spacing-150;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    color: var(--cds-color-text-default);

    &__icon {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        &::before {
                @include mixins.cds-icon-size(vars.$cds-icon-150);
            }
    }

    &__text {
        @include mixins.cds-paragraph-m;
        padding: 0 vars.$cds-spacing-50;
        height: vars.$cds-size-150;
            display: flex;
            align-content: center;
            flex-wrap: wrap;
    }

    &:focus-visible {
        outline: none;
    }

    &:disabled, &.is-disabled {
        pointer-events: none !important;
    }

    &.is-selected {
        @extend :active;
    }

    //VARIANT MODIFIERS
    &--secondary {
        background-color: transparent;
        box-shadow: inset 0px 0px 0px 0px var(--cds-color-background-deep);
        transition: box-shadow vars.$cds-transition-fast ease-in-out;

        &:hover {
            //border-bottom: 2px solid var(--cds-color-accent-primary-main);
            box-shadow: inset 0px -4px 0px 0px var(--cds-color-background-deep);
            //background-color: var(--cds-color-background-soft);
        }

        &:active {
            color: var(--cds-color-accent-primary-main);
            box-shadow: inset 0px -4px 0px 0px var(--cds-color-accent-primary-main);
        }

        &:disabled, &.is-disabled {
            color: var(--cds-color-text-muted);           
                & * {
                    color: var(--cds-color-text-muted);
                }
        }

        &:focus-visible {
            box-shadow: inset 0px -4px 0px 0px var(--cds-color-accent-primary-main);
            outline: none !important;
        }
    }
}