.info-item {
    --rocket-ui-info-item-link-color: var(--rocket-color-grey-500);
    --rocket-ui-info-item-icon-color: var(--rocket-color-grey-600);

    $this: &;

    @extend %base-styles-text-xs;

    display: inline-flex;
    align-items: start;
    color: var(--rocket-ui-info-item-link-color);
    text-decoration: none;
    column-gap: $rocket-spacing-size-3;

    @include event {
        #{$this} {
            &__text {
                text-decoration: underline;
            }
        }
    }

    &__icon {
        @include size(1.5rem);

        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        color: var(--rocket-ui-info-item-icon-color);
        font-size: 1.5rem;

        svg {
            @include size(1em);

            color: inherit;
            fill: currentColor;
        }
    }

    &__text {
        text-decoration: none;
    }
}