.secondary-navigation {
    --rocket-ui-secondary-navigation-link-color: var(--rocket-color-grey-500);

    $this: &;

    &__list {
        @extend %base-styles-text-xs;
        @include list-reset;

        display: flex;
        flex-direction: column;
        row-gap: $rocket-spacing-size-4;
    }

    &__link {
        color: var(--rocket-ui-secondary-navigation-link-color);
        text-decoration: none;

        @include event {
            text-decoration: underline;
        }
    }

    &__item {
        &--current {
            #{$this}__link {
                --rocket-ui-secondary-navigation-link-color: var(--rocket-color-white-base);

                text-decoration: underline;
            }
        }
    }
}