/*************************************
  BUTTONS
  Chefchops shared button system
  Mobile-first, flexible, no fixed heights
*************************************/

/*************************************
  BASE BUTTON
*************************************/

button,
.button,
.btn,
.cc-button,
input[type="submit"] {
  box-sizing: border-box;
  min-height: var(--cc-button-min-height, 2.5rem);
  width: auto;
  max-width: 100%;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  border: 1px solid var(--cc-colour-border);
  border-radius: var(--cc-button-radius, var(--cc-radius-md));
  background: var(--cc-colour-surface);
  color: var(--cc-colour-text);
  font-family: var(--cc-font-sans);
  font-size: clamp(0.9rem, 0.15vw + 0.86rem, 0.96rem);
  font-weight: 500;
  line-height: 1.2;
  padding-block: clamp(0.45rem, 0.6vw, 0.6rem);
  padding-inline: clamp(0.75rem, 1.2vw, 1rem);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

button:hover,
.button:hover,
.btn:hover,
.cc-button:hover,
input[type="submit"]:hover {
  text-decoration: none;
}

button:focus-visible,
.button:focus-visible,
.btn:focus-visible,
.cc-button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--cc-focus-ring-primary);
}

/*************************************
  PRIMARY BUTTONS
*************************************/

.btn-primary,
.cc-button--primary,
.button,
.btn,
.cc-button,
button.button,
input.button,
a.button,
button[type="submit"],
input[type="submit"] {
  background: var(--cc-colour-primary);
  border-color: var(--cc-colour-primary);
  color: var(--cc-colour-on-primary);
}

.btn-primary:hover,
.cc-button--primary:hover,
.button:hover,
.btn:hover,
.cc-button:hover,
button.button:hover,
input.button:hover,
a.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--cc-colour-primary-strong);
  border-color: var(--cc-colour-primary-strong);
  color: var(--cc-colour-on-primary);
}

.btn-primary:focus,
.cc-button--primary:focus,
.button:focus,
.btn:focus,
.cc-button:focus,
button.button:focus,
input.button:focus,
a.button:focus,
button[type="submit"]:focus,
input[type="submit"]:focus {
  color: var(--cc-colour-on-primary);
}

.btn-primary:visited,
.cc-button--primary:visited,
.button:visited,
.btn:visited,
.cc-button:visited,
a.button:visited {
  color: var(--cc-colour-on-primary);
}

/*************************************
  BLUE BUTTONS
*************************************/

.button-blue,
.button.button-blue,
button.button-blue,
input.button-blue[type="submit"] {
  background: var(--cc-colour-blue);
  border-color: var(--cc-colour-blue);
  color: var(--cc-colour-on-blue);
}

.button-blue:hover,
.button.button-blue:hover,
button.button-blue:hover,
input.button-blue[type="submit"]:hover {
  background: var(--cc-colour-blue-strong);
  border-color: var(--cc-colour-blue-strong);
  color: var(--cc-colour-on-blue);
}

.button-blue:focus,
.button.button-blue:focus,
button.button-blue:focus,
input.button-blue[type="submit"]:focus {
  color: var(--cc-colour-on-blue);
}

.button-blue:visited,
.button.button-blue:visited {
  color: var(--cc-colour-on-blue);
}

/*************************************
  SUCCESS BUTTONS
*************************************/

.button-success,
.button.button-success,
button.button-success,
input.button-success[type="submit"],
.btn-success,
.cc-button--success {
  background: var(--cc-colour-success);
  border-color: var(--cc-colour-success);
  color: var(--cc-colour-on-success);
}

.button-success:hover,
.button.button-success:hover,
button.button-success:hover,
input.button-success[type="submit"]:hover,
.btn-success:hover,
.cc-button--success:hover {
  background: var(--cc-colour-success-dark);
  border-color: var(--cc-colour-success-dark);
  color: var(--cc-colour-on-success);
}

.button-success:focus,
.button.button-success:focus,
button.button-success:focus,
input.button-success[type="submit"]:focus,
.btn-success:focus,
.cc-button--success:focus {
  color: var(--cc-colour-on-success);
}

/*************************************
  WARNING BUTTONS
*************************************/

.button-warning,
.button.button-warning,
button.button-warning,
input.button-warning[type="submit"],
.btn-warning,
.cc-button--warning {
  background: var(--cc-colour-warning);
  border-color: var(--cc-colour-warning);
  color: var(--cc-colour-on-warning);
}

.button-warning:hover,
.button.button-warning:hover,
button.button-warning:hover,
input.button-warning[type="submit"]:hover,
.btn-warning:hover,
.cc-button--warning:hover,
.button-warning:focus,
.button.button-warning:focus,
button.button-warning:focus,
input.button-warning[type="submit"]:focus,
.btn-warning:focus,
.cc-button--warning:focus {
  background: var(--cc-colour-warning-dark);
  border-color: var(--cc-colour-warning-dark);
  color: var(--cc-colour-on-warning);
}

.button-warning:visited,
.button.button-warning:visited,
.btn-warning:visited,
.cc-button--warning:visited {
  color: var(--cc-colour-on-warning);
}

.button-success:visited,
.button.button-success:visited,
.btn-success:visited,
.cc-button--success:visited {
  color: var(--cc-colour-on-success);
}

/*************************************
  SECONDARY / BACK BUTTONS
*************************************/

.button-back,
.button.button-back,
button.button-back,
a.button.button-back,
.button-secondary,
.button.button-secondary,
button.button-secondary,
a.button.button-secondary,
.button-grey,
.button.button-grey,
button.button-grey,
a.button.button-grey,
.button-light,
.button.button-light,
button.button-light,
a.button.button-light,
.btn-secondary,
.cc-button--secondary {
  background: var(--cc-colour-surface);
  border-color: var(--cc-colour-border);
  color: var(--cc-colour-text);
}

.button-back:hover,
.button.button-back:hover,
button.button-back:hover,
a.button.button-back:hover,
.button-back:focus,
.button.button-back:focus,
button.button-back:focus,
a.button.button-back:focus,
.button-secondary:hover,
.button.button-secondary:hover,
button.button-secondary:hover,
a.button.button-secondary:hover,
.button-secondary:focus,
.button.button-secondary:focus,
button.button-secondary:focus,
a.button.button-secondary:focus,
.button-grey:hover,
.button.button-grey:hover,
button.button-grey:hover,
a.button.button-grey:hover,
.button-grey:focus,
.button.button-grey:focus,
button.button-grey:focus,
a.button.button-grey:focus,
.button-light:hover,
.button.button-light:hover,
button.button-light:hover,
a.button.button-light:hover,
.button-light:focus,
.button.button-light:focus,
button.button-light:focus,
a.button.button-light:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.cc-button--secondary:focus,
.cc-button--secondary:hover {
  background: var(--cc-colour-surface-soft);
  border-color: var(--cc-colour-border-muted);
  color: var(--cc-colour-text);
}

.button-back:visited,
.button.button-back:visited,
a.button.button-back:visited,
.button-secondary:visited,
.button.button-secondary:visited,
a.button.button-secondary:visited,
.button-grey:visited,
.button.button-grey:visited,
a.button.button-grey:visited,
.button-light:visited,
.button.button-light:visited,
a.button.button-light:visited,
.btn-secondary:visited,
.cc-button--secondary:visited {
  color: var(--cc-colour-text);
}

/*************************************
  DANGER BUTTONS
*************************************/

.button-danger,
.btn-danger,
.cc-button--danger {
  background: var(--cc-colour-danger);
  border-color: var(--cc-colour-danger);
  color: var(--cc-colour-on-danger);
}

.button-danger:hover,
.btn-danger:hover,
.cc-button--danger:hover {
  background: var(--cc-colour-danger);
  border-color: var(--cc-colour-danger);
  color: var(--cc-colour-on-danger);
}

.button-danger:focus,
.btn-danger:focus,
.cc-button--danger:focus {
  color: var(--cc-colour-on-danger);
}

.button-danger:visited,
.btn-danger:visited,
.cc-button--danger:visited {
  color: var(--cc-colour-on-danger);
}

/*************************************
  SIZE / WIDTH MODIFIERS
*************************************/

.button-small,
.btn-sm,
.cc-button--small {
  min-height: 2rem;
  font-size: 0.85rem;
  padding-block: 0.35rem;
  padding-inline: 0.65rem;
}

.button-full,
.btn-block,
.cc-button--full {
  width: 100%;
}

/*************************************
  ACTION GROUPS
*************************************/

.page-actions,
.form-actions,
.actions,
.admin-card-actions,
.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  align-items: center;
}

.page-actions > form,
.form-actions > form,
.actions > form,
.admin-card-actions > form,
.cc-actions > form {
  display: inline-flex;
  align-items: center;
  margin: 0;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.page-actions > form > .button,
.form-actions > form > .button,
.actions > form > .button,
.admin-card-actions > form > .button,
.cc-actions > form > .button {
  margin-block: 0;
}

@media (max-width: 36rem) {
  .page-actions .button,
  .page-actions .btn,
  .page-actions button,
  .form-actions .button,
  .form-actions .btn,
  .form-actions button,
  .actions .button,
  .actions .btn,
  .actions button,
  .admin-card-actions .button,
  .admin-card-actions .btn,
  .admin-card-actions button {
    flex: 1 1 auto;
    min-inline-size: 0;
  }
}

/* /////////////////////////////////////
   SHARED ACTION GROUPS
   Used for table/card action buttons
///////////////////////////////////// */

.action-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-2, 0.5rem);
}

.action-group form {
  margin: 0;
}

.action-group .button {
  white-space: nowrap;
}

@media (max-width: 32.5rem) {
  .mobile-admin-card .action-group {
    inline-size: 100%;
  }

  .mobile-admin-card .action-group .button,
  .mobile-admin-card .action-group form {
    inline-size: 100%;
  }

  .mobile-admin-card .action-group .button {
    justify-content: center;
  }
}

/* /////////////////////////////////////
   DANGER BUTTON
   Bootstrap-style destructive action
///////////////////////////////////// */

.button.button-danger,
button.button-danger,
a.button.button-danger {
  background: var(--red, #dc3545);
  border-color: var(--red, #dc3545);
  color: var(--cc-colour-white, #fff);
}

.button.button-danger:hover,
.button.button-danger:focus,
button.button-danger:hover,
button.button-danger:focus,
a.button.button-danger:hover,
a.button.button-danger:focus {
  background: var(--cc-colour-danger-strong, #bb2d3b);
  border-color: var(--cc-colour-danger-strong, #bb2d3b);
  color: var(--cc-colour-white, #fff);
}

.button.button-danger:visited,
a.button.button-danger:visited {
  color: var(--cc-colour-white, #fff);
}

/* /////////////////////////////////////
   SHARED BUTTON TYPOGRAPHY
///////////////////////////////////// */

.button,
.btn,
button.button,
a.button,
input.button,
input[type="submit"].button {
  font-weight: 400;
  letter-spacing: 0;
}