/*
 * Buttons. Bootstrap-style classes; every colour comes from the --cf-* tokens,
 * so one markup works in all four looks.
 *
 *   <button type="button" class="btn btn-primary">Save</button>
 *
 * Variants: btn-primary, btn-outline-primary, btn-secondary, btn-success,
 *           btn-danger, btn-outline-danger, btn-link
 * Sizes:    btn-sm (32px), default (40px), btn-lg (48px); add w-100 to fill the row
 * Icons:    <span class="icon icon-plus" aria-hidden="true"></span> before or after the label;
 *           icon-only buttons add btn-icon and an aria-label
 * Disabled: the disabled attribute (or .disabled + aria-disabled="true" on a link)
 *
 * A variant only sets the --cf-btn-* properties below; the base rule draws every state.
 */

.btn,
.button-filled, .transparent-bg-button, .cancel-button, .simple-button,
.btn-with-icon, .form-btn, .standard-btn, .login-btn, .confirm-btn,
.grid-btn-add, .grid-btn-cancel {
  --cf-btn-color: var(--cf-body-color);
  --cf-btn-bg: transparent;
  --cf-btn-border: transparent;
  --cf-btn-hover-color: var(--cf-btn-color);
  --cf-btn-hover-bg: var(--cf-btn-bg);
  --cf-btn-hover-border: var(--cf-btn-border);
  --cf-btn-active-bg: var(--cf-btn-hover-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--cf-control-height);
  padding: 0 16px;
  border: 1px solid var(--cf-btn-border);
  border-radius: var(--cf-radius);
  background: var(--cf-btn-bg);
  color: var(--cf-btn-color);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-font-size);
  font-weight: var(--cf-font-weight-bold);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--cf-transition), border-color var(--cf-transition), color var(--cf-transition);
}

:is(.btn, .button-filled, .transparent-bg-button, .cancel-button, .simple-button,
    .btn-with-icon, .form-btn, .standard-btn, .login-btn, .confirm-btn, .grid-btn-add, .grid-btn-cancel):hover:not(:disabled) {
  color: var(--cf-btn-hover-color);
  background: var(--cf-btn-hover-bg);
  border-color: var(--cf-btn-hover-border);
}

:is(.btn, .button-filled, .transparent-bg-button, .cancel-button, .simple-button,
    .btn-with-icon, .form-btn, .standard-btn, .login-btn, .confirm-btn, .grid-btn-add, .grid-btn-cancel):active:not(:disabled) {
  background: var(--cf-btn-active-bg);
  border-color: var(--cf-btn-active-bg);
}

:is(.btn, .button-filled, .transparent-bg-button, .cancel-button, .simple-button,
    .btn-with-icon, .form-btn, .standard-btn, .login-btn, .confirm-btn, .grid-btn-add, .grid-btn-cancel):focus-visible {
  outline: var(--cf-focus-ring-width) solid var(--cf-focus-ring);
  outline-offset: var(--cf-focus-ring-offset);
}

:is(.btn, .button-filled, .transparent-bg-button, .cancel-button, .simple-button,
    .btn-with-icon, .form-btn, .standard-btn, .login-btn, .confirm-btn, .grid-btn-add, .grid-btn-cancel):is(:disabled, .disabled) {
  opacity: var(--cf-disabled-opacity);
  cursor: not-allowed;
}

a.btn.disabled,
.btn[aria-disabled="true"] {
  pointer-events: none;
}

.btn > .icon {
  width: 16px;
  height: 16px;
}

/* ---- Variants ---- */

.btn-primary,
.button-filled.blue, .login-btn, .confirm-btn, .grid-btn-add {
  --cf-btn-color: var(--cf-on-primary);
  --cf-btn-bg: var(--cf-primary);
  --cf-btn-border: var(--cf-primary);
  --cf-btn-hover-bg: var(--cf-primary-hover);
  --cf-btn-hover-border: var(--cf-primary-hover);
  --cf-btn-active-bg: var(--cf-primary-active);
}

.btn-outline-primary,
.transparent-bg-button, .btn-with-icon:not(.cancel-btn):not(.confirm-btn), .form-btn, .standard-btn,
.simple-button.blue-button {
  --cf-btn-color: var(--cf-primary-text);
  --cf-btn-border: var(--cf-primary-text);
  --cf-btn-hover-color: var(--cf-on-primary);
  --cf-btn-hover-bg: var(--cf-primary);
  --cf-btn-hover-border: var(--cf-primary);
  --cf-btn-active-bg: var(--cf-primary-active);
}

.btn-secondary {
  --cf-btn-color: var(--cf-on-secondary);
  --cf-btn-bg: var(--cf-secondary);
  --cf-btn-border: var(--cf-secondary);
  --cf-btn-hover-bg: var(--cf-secondary-hover);
  --cf-btn-hover-border: var(--cf-secondary-hover);
}

/* "on-primary" is the text colour for every filled variant (white in all looks) */
.btn-success,
.button-filled:not(.blue) {
  --cf-btn-color: var(--cf-on-primary);
  --cf-btn-bg: var(--cf-success);
  --cf-btn-border: var(--cf-success);
  --cf-btn-hover-bg: var(--cf-success-hover);
  --cf-btn-hover-border: var(--cf-success-hover);
}

.btn-danger, .grid-btn-cancel {
  --cf-btn-color: var(--cf-on-primary);
  --cf-btn-bg: var(--cf-danger);
  --cf-btn-border: var(--cf-danger);
  --cf-btn-hover-bg: var(--cf-danger-hover);
  --cf-btn-hover-border: var(--cf-danger-hover);
}

.btn-outline-danger,
.cancel-button, .simple-button.red-button, .btn-with-icon.cancel-btn {
  --cf-btn-color: var(--cf-danger-text);
  --cf-btn-border: var(--cf-danger-text);
  --cf-btn-hover-color: var(--cf-on-primary);
  --cf-btn-hover-bg: var(--cf-danger);
  --cf-btn-hover-border: var(--cf-danger);
  --cf-btn-active-bg: var(--cf-danger-hover);
}

.btn-info {
  --cf-btn-color: var(--cf-on-primary);
  --cf-btn-bg: var(--cf-info);
  --cf-btn-border: var(--cf-info);
  --cf-btn-hover-bg: var(--cf-info-hover);
  --cf-btn-hover-border: var(--cf-info-hover);
}

.btn-warning {
  --cf-btn-color: var(--cf-on-warning);
  --cf-btn-bg: var(--cf-warning);
  --cf-btn-border: var(--cf-warning);
  --cf-btn-hover-bg: color-mix(in srgb, var(--cf-warning) 88%, #000);
  --cf-btn-hover-border: color-mix(in srgb, var(--cf-warning) 88%, #000);
}

.btn-link {
  --cf-btn-color: var(--cf-link-color);
  padding: 0 4px;
}

/* Close (×) for dialogs, banners, tags and panels: neutral, takes the surrounding text colour.
 *   <button type="button" class="btn-close" aria-label="Close"><span class="icon icon-x" aria-hidden="true"></span></button> */
.btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--cf-radius-sm);
  background: transparent;
  color: inherit;
  opacity: .75;
  cursor: pointer;
  transition: opacity var(--cf-transition), background-color var(--cf-transition);
}

.btn-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.btn-close > .icon {
  width: 14px;
  height: 14px;
}

.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

/* ---- Sizes ---- */

.btn-sm, .grid-btn-add, .grid-btn-cancel {
  gap: 6px;
  height: var(--cf-control-height-sm);
  padding: 0 12px;
  font-size: var(--cf-font-size-sm);
}

.btn-lg,
.standard-btn {
  height: var(--cf-control-height-lg);
  padding: 0 20px;
  font-size: var(--cf-font-size-lg);
}

.btn-icon,
.simple-button {
  width: var(--cf-control-height);
  padding: 0;
}

.btn-icon.btn-sm { width: var(--cf-control-height-sm); }
.btn-icon.btn-lg { width: var(--cf-control-height-lg); }

/* ---- Old class names: aliases for the transition period ----
 * button-filled -> btn-success, button-filled blue -> btn-primary,
 * transparent-bg-button / btn-with-icon / form-btn / standard-btn -> btn-outline-primary,
 * cancel-button / btn-with-icon cancel-btn -> btn-outline-danger, simple-button -> btn-icon,
 * login-btn / confirm-btn -> btn-primary, add-button -> btn-link with a round icon.
 * New markup should use the btn classes; these go when the apps have migrated. */

.standard-btn {
  width: 100%;
}

.add-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cf-heading-color);
  font-family: var(--cf-font-sans);
  font-size: var(--cf-font-size);
  font-weight: var(--cf-font-weight-bold);
  cursor: pointer;
}

.add-button .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cf-primary);
  transition: background-color var(--cf-transition);
}

.add-button:hover .circle { background: var(--cf-primary-hover); }
.add-button:active .circle { background: var(--cf-primary-active); }
.add-button.clear .circle { background: transparent; border: 1px solid var(--cf-danger-text); }
.add-button.clear:hover .circle { background: var(--cf-danger-subtle); }
.add-button.clear:active .circle { background: var(--cf-danger); }
.add-button.clear .white-cross { display: none; }
.add-button.clear:active .white-cross { display: block; }
.add-button.clear:active .red-cross { display: none; }
.add-button:disabled { opacity: var(--cf-disabled-opacity); cursor: not-allowed; }