.tabs {
    --rocket-ui-tab-background-color: var(--rocket-color-secondary-100);
    --rocket-ui-tab-color-text: var(--rocket-color-white-base);

    $this: &;

    &__triggers {
        display: flex;
        width: 100%;
        max-width: fit-content;
        padding-left: 0;
        overflow: auto;
        white-space: nowrap;
        gap: 22px;
        margin-bottom: 85px;
        margin-inline: auto;

        &::-webkit-scrollbar {
            display: none;
            scrollbar-width: none;
        }
    }

    &__item {
        @include transition;

        position: relative;
        margin: 0;
        border: 0;
        outline: none;
        cursor: pointer;
        background-color: var(--rocket-ui-tab-background-color);
        color: var(--rocket-ui-tab-color-text);
        display: inline-flex;
        font-size: 20px;
        text-decoration: none;
        padding: 9px 22px;

        @include event {
            --rocket-ui-tab-background-color: var(--rocket-color-white-base);
            --rocket-ui-tab-color-text: var(--rocket-color-secondary-100);
        }

        &--active {
            --rocket-ui-tab-background-color: var(--rocket-color-white-base);
            --rocket-ui-tab-color-text: var(--rocket-color-secondary-100);
        }
    }

    &__text {
        flex-shrink: 0;
        color: var(--rocket-ui-tab-color-text);
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5;
    }

    &__panel {
        display: none;
        outline: none;

        &--active {
            display: block;
        }
    }
}