s5l.ru-crm/app/components/UI/Button/index.styl

// Стили для кнопки
.btn
  display: inline-flex
  align-items: center
  justify-content: center
  padding: var(--spacing-sm) var(--spacing-md)
  border: var(--border-width) solid transparent
  border-radius: var(--border-radius)
  font-family: var(--font-family)
  font-size: var(--font-size-base)
  font-weight: var(--font-weight-medium)
  line-height: var(--line-height-tight)
  text-decoration: none
  cursor: pointer
  transition: var(--transition-fast)
  background: var(--color-primary)
  color: var(--color-white)
  position: relative
  overflow: hidden
  
  &:hover:not(.btn--disabled):not(.btn--loading)
    background: var(--color-primary-50)
    transform: translateY(-1px)
    box-shadow: var(--shadow-md)
  
  &:active:not(.btn--disabled):not(.btn--loading)
    transform: translateY(0)
    box-shadow: var(--shadow-sm)
  
  &.btn--disabled
    opacity: 0.6
    cursor: not-allowed
    background: var(--color-secondary)
  
  &.btn--loading
    cursor: wait
    color: transparent
  
  // Размеры
  &.btn--small
    padding: var(--spacing-xs) var(--spacing-sm)
    font-size: var(--font-size-sm)
  
  &.btn--medium
    padding: var(--spacing-sm) var(--spacing-md)
    font-size: var(--font-size-base)
  
  &.btn--large
    padding: var(--spacing-md) var(--spacing-lg)
    font-size: var(--font-size-lg)
    font-weight: var(--font-weight-semibold)
  
  // Типы
  &.btn--primary
    background: var(--color-primary)
    border-color: var(--color-primary)
    
    &:hover:not(.btn--disabled):not(.btn--loading)
      background: var(--color-primary-50)
      border-color: var(--color-primary-50)
  
  &.btn--secondary
    background: var(--color-secondary)
    border-color: var(--color-secondary)
    
    &:hover:not(.btn--disabled):not(.btn--loading)
      background: var(--color-dark-50)
      border-color: var(--color-dark-50)
  
  &.btn--success
    background: var(--color-success)
    border-color: var(--color-success)
    
    &:hover:not(.btn--disabled):not(.btn--loading)
      background: #218838
      border-color: #1e7e34
  
  &.btn--danger
    background: var(--color-danger)
    border-color: var(--color-danger)
    
    &:hover:not(.btn--disabled):not(.btn--loading)
      background: #c82333
      border-color: #bd2130
  
  &.btn--outline
    background: transparent
    color: var(--color-primary)
    border-color: var(--color-primary)
    
    &:hover:not(.btn--disabled):not(.btn--loading)
      background: var(--color-primary-10)
      color: var(--color-primary)
  
  // Лоадер
  .btn__loader
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    width: 20px
    height: 20px
    border: 2px solid transparent
    border-top: 2px solid var(--color-white)
    border-radius: 50%
    animation: btn-spin 1s linear infinite
  
  .btn__text
    display: flex
    align-items: center
    gap: var(--spacing-xs)

// Темная тема
.theme-dark
  .btn--outline
    color: var(--color-light)
    border-color: var(--color-light)
    
    &:hover:not(.btn--disabled):not(.btn--loading)
      background: var(--color-light-10)
      color: var(--color-light)

// Анимация лоадера
@keyframes btn-spin
  0%
    transform: translate(-50%, -50%) rotate(0deg)
  100%
    transform: translate(-50%, -50%) rotate(360deg)

// Адаптивность
@media (max-width: 768px)
  .btn
    width: 100%
    justify-content: center
    
    &.btn--small,
    &.btn--medium,
    &.btn--large
      width: 100%