@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;
    }

    .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;
        }

        > 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);
        }
    }

    .components-tab-panel__tab-content {
        max-width: $container-max-width;
        width: 100%;
    }
}
