/* ==========================================================
   BUTTON
   Candy UI Kit
========================================================== */

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 40px;

  padding: 0 18px;

  border: 2px solid transparent;

  border-radius: var(--radius-sm);

  font-family: inherit;

  font-size: var(--font-size-sm);

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  cursor: pointer;

  user-select: none;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

/* ==========================================================
   BUTTON ICON
========================================================== */

.btn__icon {
  width: 20px;

  height: 20px;

  min-width: 20px;

  min-height: 20px;

  display: block;

  flex: none;

  object-fit: contain;
}

.btn--icon {
  width: 40px;

  height: 40px;

  min-width: 40px;
  min-height: 40px;

  padding: 0;

  gap: 0;

  display: inline-flex;

  align-items: center;
  justify-content: center;
}

/* ==========================================================
   ICON
========================================================== */

.btn--icon .btn__icon {
  display: block;

  width: 20px;
  height: 20px;

  min-width: 20px;
  min-height: 20px;

  flex: none;

  object-fit: contain;

  opacity: 1;

  visibility: visible;
}

/* ==========================================================
   ICON BUTTON SIZE
========================================================== */

.btn--icon.btn--xs {
  width: 32px;
  height: 32px;

  min-width: 32px;
  min-height: 32px;
}

.btn--icon.btn--xs .btn__icon {
  width: 16px;
  height: 16px;

  min-width: 16px;
  min-height: 16px;
}

.btn--icon.btn--sm {
  width: 36px;
  height: 36px;

  min-width: 36px;
  min-height: 36px;
}

.btn--icon.btn--sm .btn__icon {
  width: 18px;
  height: 18px;

  min-width: 18px;
  min-height: 18px;
}

.btn--icon.btn--md {
  width: 40px;
  height: 40px;

  min-width: 40px;
  min-height: 40px;
}

.btn--icon.btn--md .btn__icon {
  width: 20px;
  height: 20px;

  min-width: 20px;
  min-height: 20px;
}

.btn--icon.btn--lg {
  width: 48px;
  height: 48px;

  min-width: 48px;
  min-height: 48px;
}

.btn--icon.btn--lg .btn__icon {
  width: 24px;
  height: 24px;

  min-width: 24px;
  min-height: 24px;
}

.btn--icon.btn--xl {
  width: 56px;
  height: 56px;

  min-width: 56px;
  min-height: 56px;
}

.btn--icon.btn--xl .btn__icon {
  width: 28px;
  height: 28px;

  min-width: 28px;
  min-height: 28px;
}

/* ==========================================================
   ICON COLOR
========================================================== */

.btn--primary .btn__icon,
.btn--secondary .btn__icon,
.btn--success .btn__icon,
.btn--warning .btn__icon,
.btn--danger .btn__icon {
  filter: brightness(0) invert(1);
}

/* ==========================================================
   PRIMARY
========================================================== */

.btn--primary {
  color: #ffffff;

  background: var(--primary);

  border-color: var(--primary);

  box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 75%, #000000);
}

.btn--primary:hover {
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(2px);

  box-shadow: none;
}

/* ==========================================================
   SECONDARY
========================================================== */

.btn--secondary {
  color: #ffffff;

  background: var(--secondary);

  border-color: var(--secondary);

  box-shadow: 0 3px 0 color-mix(in srgb, var(--secondary) 75%, #000000);
}

.btn--secondary:hover {
  transform: translateY(-1px);
}

.btn--secondary:active {
  transform: translateY(2px);

  box-shadow: none;
}

/* ==========================================================
   SUCCESS
========================================================== */

.btn--success {
  color: #ffffff;

  background: var(--success);

  border-color: var(--success);

  box-shadow: 0 3px 0 color-mix(in srgb, var(--success) 75%, #000000);
}

.btn--success:hover {
  transform: translateY(-1px);
}

.btn--success:active {
  transform: translateY(2px);

  box-shadow: none;
}

/* ==========================================================
   WARNING
========================================================== */

.btn--warning {
  color: #ffffff;

  background: var(--warning);

  border-color: var(--warning);

  box-shadow: 0 3px 0 color-mix(in srgb, var(--warning) 75%, #000000);
}

.btn--warning:hover {
  transform: translateY(-1px);
}

.btn--warning:active {
  transform: translateY(2px);

  box-shadow: none;
}

/* ==========================================================
   DANGER
========================================================== */

.btn--danger {
  color: #ffffff;

  background: var(--danger);

  border-color: var(--danger);

  box-shadow: 0 3px 0 color-mix(in srgb, var(--danger) 75%, #000000);
}

.btn--danger:hover {
  transform: translateY(-1px);
}

.btn--danger:active {
  transform: translateY(2px);

  box-shadow: none;
}

/* ==========================================================
   OUTLINE
========================================================== */

.btn--outline {
  color: var(--text);

  background: #ffffff;

  border-color: var(--border);

  box-shadow: 0 3px 0 var(--border);
}

.btn--outline:hover {
  transform: translateY(-1px);
}

.btn--outline:active {
  transform: translateY(2px);

  box-shadow: none;
}

/* ==========================================================
   GHOST
========================================================== */

.btn--ghost {
  color: var(--text);

  background: transparent;

  border-color: transparent;

  box-shadow: none;
}

.btn--ghost:hover {
  background: rgba(0, 0, 0, 0.04);
}

.btn--ghost:active {
  transform: translateY(1px);
}

/* ==========================================================
   SIZES
========================================================== */

.btn--xs {
  min-height: 32px;

  padding: 0 12px;

  font-size: var(--font-size-xs);
}

.btn--sm {
  min-height: 36px;

  padding: 0 14px;

  font-size: 13px;
}

.btn--md {
  min-height: 40px;

  padding: 0 18px;

  font-size: var(--font-size-sm);
}

.btn--lg {
  min-height: 48px;

  padding: 0 22px;

  font-size: 15px;
}

.btn--xl {
  min-height: 56px;

  padding: 0 26px;

  font-size: var(--font-size-md);
}

/* ==========================================================
   DISABLED
========================================================== */

.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;
}

/* ==========================================================
   FOCUS
========================================================== */

.btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);

  outline-offset: 2px;
}