.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.05em;

  padding: 0.5rem 1rem;
  border-radius: 9999px;

  transition: background-color 0.2s;

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

@media (max-width: 640px) {
  .btn {
    width: 100%;
    padding: 0.5rem;
  }

  .btn--icon {
    width: auto;
    aspect-ratio: 1/1;
  }
}

.btn--primary {
  color: var(--color-white);
  background-color: var(--color-blue-600);

  &:hover {
    background-color: var(--color-blue-700);
  }

  &:active {
    background-color: var(--color-blue-800);
  }

  &:focus {
    outline-color: var(--color-blue-800);
  }
}

.btn--secondary {
  color: var(--color-blue-600);

  &:hover {
    background-color: var(--color-blue-50);
  }

  &:active {
    color: var(--color-blue-600);
    background-color: var(--color-blue-100);
  }

  &:focus {
    background-color: var(--color-blue-100);
  }
}

.btn--danger {
  color: var(--color-red-600);

  &:hover {
    background-color: var(--color-red-50);
  }

  &:active {
    background-color: var(--color-red-100);
  }

  &:focus {
    background-color: var(--color-red-200);
  }
}

.btn--modal-primary {
  color: var(--color-white);
  background-color: var(--color-orange-600);

  &:hover {
    background-color: var(--color-orange-700);
  }

  &:active {
    background-color: var(--color-orange-800);
  }

  &:focus {
    background-color: var(--color-orange-500);
    outline-color: var(--color-orange-800);
  }

  &:disabled {
    background-color: var(--color-orange-700);
  }
}

.btn--modal-secondary {
  color: var(--color-orange-600);

  &:hover {
    background-color: var(--color-orange-100);
  }

  &:active {
    color: var(--color-orange-600);
    background-color: var(--color-orange-200);
  }

  &:focus {
    background-color: var(--color-orange-200);
  }
}

.btn--bordered {
  border: 1px solid var(--color-blue-200);
}

.btn--icon {
  padding: 0.5rem;
  border-radius: 9999px;
}

.btn--mini-icon {
  padding: 0.25rem;
  border-radius: 9999px;
}