@use "variables" as *;

.ekesto-settings-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 $spacing-lg $spacing-lg $spacing-lg;
    @media screen and (max-width: $breakpoint-mobile-max) {
        padding-bottom: 0;
    }
    .has-many-tabs & {
        padding: 0 0 $spacing-lg 0;
        gap: $spacing-xl;
        align-self: center;
        justify-content: flex-start;
        flex-direction: row;
        align-items: flex-start;
        width: calc(100% - (#{$spacing-lg} * 2));
        max-width: $container-max-width-wide;
        @media screen and (max-width: $breakpoint-mobile-max) {
            width: 100%;
            padding: 0 $spacing-lg 0 $spacing-lg;
            flex-direction: column;
            justify-content: center;
            gap: 0;
            padding-bottom: 0;
        }
    }

    .components-tab-panel__tabs {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: $spacing-xl 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: $spacing-xs;

        @media screen and (max-width: $breakpoint-mobile-max) {
            justify-content: center;
            flex-direction: row;
        }

        .has-many-tabs & {
            align-items: flex-start;
            flex-direction: column;
            flex-wrap: nowrap;
            flex: 0 0 auto;
            @media screen and (max-width: $breakpoint-mobile-max) {
                justify-content: center;
                flex-direction: row;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 0;
            }
        }

        > button {
            font-size: $font-size-tabs;
        }
    }

    .components-tab-panel__tabs-item {
        font-size: $font-size-tabs !important;
        border-bottom: 2px solid transparent;
        padding: 0 $spacing-sm;
        text-align: left;
        transition:
            color 100ms ease-in,
            border-color 100ms ease-in;
        &:hover,
        &:active {
            color: var(--wp-admin-theme-color) !important;
        }
        &::after {
            display: none;
        }
        &.is-active {
            border-color: var(--wp-admin-theme-color);
            color: var(--wp-admin-theme-color);
        }
        .has-many-tabs & {
            font-size: $font-size-body !important;
            min-width: 0;
            height: auto !important;
            padding: $spacing-xs 0.1em $spacing-xs 0;
            @media screen and (max-width: $breakpoint-mobile-max) {
                padding: $spacing-sm $spacing-sm;
            }
        }
    }

    .components-tab-panel__tab-content {
        max-width: $container-max-width;
        width: 100%;
        .has-many-tabs & {
            padding: $spacing-xl 0;
            max-width: none;
            flex: 1 1 0;
            min-width: 0;
            @media screen and (max-width: $breakpoint-mobile-max) {
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}

// Settings tab nav button - visual separator from group tabs
.eci-tab--settings {
    margin-right: $spacing-xl;

    .has-many-tabs & {
        margin-right: 0;
        margin-bottom: 50px;
        @media screen and (max-width: $breakpoint-mobile-max) {
            margin: 0;
        }
    }
    svg {
        margin-right: $spacing-xs;
        @media screen and (max-width: $breakpoint-mobile-max) {
            width: 16px;
            height: 16px;
        }
    }
}
