/*
 * Base Button Override
 * --------------------------------------------------
 */
.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-line-height: 1.3333333333;
  --bs-btn-border-radius: 0.25rem;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
  --bs-btn-focus-box-shadow: var(--bs-btn-box-shadow);
  display: inline-flex;
  column-gap: 0.5rem;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
}

/*
 * Button Sizes
 * --------------------------------------------------
 */
.btn-group-sm > .btn,
.btn-sm {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0.25rem;
  --bs-btn-line-height: 1.3333333333;
}

.btn-group-xs > .btn,
.btn-xs {
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0.25rem;
  --bs-btn-line-height: 1;
}

/*
 * Button Shadow Color Mapping
 * --------------------------------------------------
 */
.btn-primary,
.btn-outline-primary {
  --insezo-shadow-rgb: var(--color-primary-rgb);
}

.btn-secondary,
.btn-outline-secondary {
  --insezo-shadow-rgb: var(--color-secondary-rgb);
}

.btn-tertiary,
.btn-outline-tertiary {
  --insezo-shadow-rgb: var(--color-tertiary-rgb);
}

.btn-success,
.btn-outline-success {
  --insezo-shadow-rgb: var(--color-success-rgb);
}

.btn-danger,
.btn-outline-danger {
  --insezo-shadow-rgb: var(--color-danger-rgb);
}

.btn-warning,
.btn-outline-warning {
  --insezo-shadow-rgb: var(--color-warning-rgb);
}

.btn-info,
.btn-outline-info {
  --insezo-shadow-rgb: var(--color-info-rgb);
}

.btn-dark,
.btn-outline-dark {
  --insezo-shadow-rgb: var(--color-dark-rgb);
}

.btn-light,
.btn-outline-light {
  --insezo-shadow-rgb: var(--color-light-rgb);
}

.btn-violet,
.btn-outline-violet {
  --insezo-shadow-rgb: var(--color-violet-rgb);
}

/*
 * Button Secondary Hover/Active State Fixup
 * --------------------------------------------------
 */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-secondary) 95%, var(--color-dark));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color-secondary) 95%, var(--color-dark));
  --bs-btn-active-bg: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
  --bs-btn-active-border-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
}

/*
 * Button Hover Elevation
 * --------------------------------------------------
 */
.btn:hover,
.btn:focus-visible {
  --bs-btn-box-shadow: 0 1px 2px 0 rgb(var(--insezo-shadow-rgb) / 45%),
  0 1px 3px 1px rgb(var(--insezo-shadow-rgb) / 30%);
  box-shadow: 0 1px 2px 0 rgb(var(--insezo-shadow-rgb)/45%), 0 1px 3px 1px rgb(var(--insezo-shadow-rgb)/30%);
}

/*
 * Button Toggle States
 * --------------------------------------------------
 */
.btn-check + .btn-secondary {
  height: 32px;
}

.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary:active {
  color: #ffffff;
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}