@use "sass:color";
@use "../variables" as *;
@use "../mixins" as *;

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: $border-radius;
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all $transition-base;
  user-select: none;

  &:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px $primary-light;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  // Основная кнопка
  &--primary {
    color: white;
    background-color: $primary;
    border-color: $primary;

    &:hover:not(:disabled) {
      background-color: $primary-dark;
      border-color: $primary-dark;
    }
  }

  // Вторичная кнопка
  &--secondary {
    color: $primary;
    background-color: transparent;
    border-color: $primary;

    &:hover:not(:disabled) {
      color: white;
      background-color: $primary;
    }
  }

  // Кнопка успеха
  &--success {
    color: white;
    background-color: $secondary;
    border-color: $secondary;

    &:hover:not(:disabled) {
      background-color: color.adjust($secondary, $lightness: -10%);
      border-color: color.adjust($secondary, $lightness: -10%);
    }
  }

  // Размеры
  &--sm {
    padding: 0.5rem 1rem;
    font-size: $font-size-sm;
  }

  &--lg {
    padding: 1rem 2rem;
    font-size: $font-size-lg;
  }

  // Полная ширина
  &--block {
    display: flex;
    width: 100%;
  }
}
