template/app/shared/AppLink.styl

@import '../DesignTokens.styl'

// Базовые стили для AppLink компонента
.app-link 
    color: var(--primary-color)
    text-decoration: none
    transition: color var(--transition-fast)

.app-link:hover 
    color: var(--primary-dark)
    text-decoration: underline

.app-link.router-link-active 
    font-weight: var(--font-semibold)
    color: var(--primary-dark)

// Стили для внешних ссылок
.app-link-external::after 
    content: " ↗"
    font-size: 0.875em
    opacity: 0.7

// Стили для кнопко-подобных ссылок
.app-link-button 
    display: inline-flex
    align-items: center
    gap: var(--space-2)
    padding: var(--space-2) var(--space-4)
    background: var(--primary-color)
    color: white
    border-radius: 6px
    font-weight: var(--font-medium)
    transition: all var(--transition-fast)

.app-link-button:hover 
    background: var(--primary-dark)
    transform: translateY(-1px)
    text-decoration: none
    color: white
    box-shadow: var(--shadow-md)

// Стили для иконок в ссылках
.app-link-with-icon 
    display: inline-flex
    align-items: center
    gap: var(--space-2)

.app-link-icon 
    width: 16px
    height: 16px
    transition: transform var(--transition-fast)

.app-link:hover .app-link-icon 
    transform: translateX(2px)