@import "../tokens/tokens";

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: $r-sm;
  font-family: $font-sans;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.15px;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.18s;

  &:disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
  }
}

.sm {
  padding: 7px 14px;
  font-size: 12.5px;
}

.full {
  width: 100%;
}

.primary {
  background: $navy-800;
  border-color: $navy-800;
  color: #fff;

  &:hover {
    background: $navy-700;
    box-shadow: $sh-2;
  }
}

.accent {
  background: $grad-gold;
  border-color: $gold-500;
  color: $navy-950;
  font-weight: 600;

  &:hover {
    box-shadow: $sh-gold;
    transform: translateY(-1px);
  }
}

.secondary {
  background: $white;
  border-color: $gray-300;
  color: $navy-800;

  &:hover {
    border-color: $gold-500;
    color: $navy-900;
  }
}

.ghost {
  background: transparent;
  color: $navy-700;

  &:hover {
    background: $navy-100;
  }
}

.danger {
  background: $white;
  border-color: $gray-300;
  color: $red-500;

  &:hover {
    border-color: $red-500;
    background: $red-50;
  }
}