@use "@/common/styles/colors" as *

.btn
  display: inline-flex
  align-items: center
  justify-content: center
  gap: 0.5rem
  font-family: inherit
  font-weight: 600
  border: none
  border-radius: 8px
  cursor: pointer
  transition: all 0.2s ease
  white-space: nowrap

  &:disabled
    opacity: 0.5
    cursor: not-allowed

  svg
    font-size: 1em

.btn-sm
  padding: 0.5rem 1rem
  font-size: 0.875rem

.btn-md
  padding: 0.75rem 1.5rem
  font-size: 0.9375rem

.btn-lg
  padding: 1rem 2rem
  font-size: 1rem

.btn-filled
  &.btn-primary
    background: $primary
    color: $background

    &:hover:not(:disabled)
      background: $primary-light
      transform: translateY(-1px)

    &:active:not(:disabled)
      transform: translateY(0)

  &.btn-blue
    background: $blue
    color: white

    &:hover:not(:disabled)
      background: $blue-light
      transform: translateY(-1px)

  &.btn-red
    background: $red
    color: white

    &:hover:not(:disabled)
      background: $red-light
      transform: translateY(-1px)

  &.btn-green
    background: $primary
    color: $background

    &:hover:not(:disabled)
      background: $primary-light
      transform: translateY(-1px)

.btn-outline
  background: transparent

  &.btn-primary
    border: 1px solid $primary
    color: $primary

    &:hover:not(:disabled)
      background: rgba($primary, 0.1)

  &.btn-blue
    border: 1px solid $blue
    color: $blue

    &:hover:not(:disabled)
      background: rgba($blue, 0.1)

  &.btn-red
    border: 1px solid $red
    color: $red

    &:hover:not(:disabled)
      background: rgba($red, 0.1)

  &.btn-green
    border: 1px solid $primary
    color: $primary

    &:hover:not(:disabled)
      background: rgba($primary, 0.1)

.btn-ghost
  background: transparent
  border: none

  &.btn-primary
    color: $primary

    &:hover:not(:disabled)
      background: rgba($primary, 0.1)

  &.btn-blue
    color: $blue

    &:hover:not(:disabled)
      background: rgba($blue, 0.1)