@import '../../../../styles/design-tokens';

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

  &:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }
}

.primary {
  background: $navy-800;
  color: #fff;
  border-color: $navy-800;
  &:hover:not(:disabled) { background: $navy-700; box-shadow: $sh-2; }
}

.accent {
  @include btn-accent;
}

.secondary {
  background: #fff;
  color: $navy-800;
  border-color: $gray-300;
  &:hover:not(:disabled) { border-color: $gold-500; color: $navy-900; }
}

.ghost {
  background: transparent;
  color: $navy-700;
  border-color: transparent;
  &:hover:not(:disabled) { background: $navy-100; }
}

.danger {
  background: #fff;
  color: $red-500;
  border-color: $gray-300;
  &:hover:not(:disabled) { border-color: $red-500; background: $red-50; }
}

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

.iconButton {
  width: 33px;
  height: 33px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: $r-sm;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: $gray-400;
  transition: .18s;

  &:hover:not(:disabled) { color: $navy-800; background: $navy-50; border-color: $gray-200; }
  &.danger:hover:not(:disabled) { color: $red-500; background: $red-50; }
  &:disabled { opacity: .4; cursor: not-allowed; }
}