/**
 * @file
 * Section 4: Buttons.
 *
 * Split from css/staged-edits-from-gui.css (see docs/Theme updates.md for
 * the full split file list).
 */

.form-control.button {
  width: revert;
}

.btn {
  border-radius: 8px;
  line-height: 1.4;
  padding: 0.8rem 1.5rem;
  min-width: 160px;
  font-size: 1.1rem;
  font-weight: 600;
  /* Might need a way to switch between 500 and 600 for the default button */
  box-shadow: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid;
}

.btn:hover,
.btn:focus {
  text-decoration: none;
  transition: all 0.2s;
}

.btn-sm {
  line-height: 1.15;
  padding: 0.75rem 1.5rem;
  min-width: 150px;
  font-size: 0.95rem;
  font-weight: 500;
}

.btn-lg {
  line-height: 1.6;
  padding: 0.85rem 2rem;
  min-width: 185px;
  font-size: 1.25rem;
  font-weight: 600;
}

/* --- Primary --- */
.btn-primary {
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-text-emphasis);
  border-color: var(--bs-primary-text-emphasis);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* @TODO Need to add arrow icon - or maybe as separate class if that is how it should be done? */
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  /* TEMP making important because of temp link fix in tables */
  background-color: var(--bs-light);
  border: 2px solid var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--bs-dark) !important;
  /* TEMP making important because of temp link fix in tables */
  background-color: var(--bs-info);
  border: 2px solid var(--bs-info);
  /* Maybe change transition to none */
}

.btn-outline-primary-light {
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border: 2px solid var(--bs-light);
}

.btn-outline-primary-light:hover,
.btn-outline-primary-light:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-light);
}

/* --- Secondary --- */
.btn-secondary {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--bs-secondary-text-emphasis);
  border-color: var(--bs-secondary-text-emphasis);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  /* @TODO Need to add arrow icon - or maybe as separate class if that is how it should be done? */
}

.btn-outline-secondary-light {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border: 2px solid var(--bs-light);
}

.btn-outline-secondary-light:hover,
.btn-outline-secondary-light:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-light);
}

.btn-outline-secondary-dark {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border: 2px solid var(--bs-dark);
}

.btn-outline-secondary-dark:hover,
.btn-outline-secondary-dark:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border: 2px solid var(--bs-dark);
}

/* --- Success / Danger / Info (placeholders for now) @TODO later --- */
/*.btn-success {
  Not set yet
}*/

/*.btn-danger {
  Not set yet
}*/

/*.btn-info {
  Not set yet
}*/

/*.btn-info:hover,
.btn-info:focus {
  Not set yet
}*/

/*.btn-link {
  Not set yet
}*/

/* --- Warning (@TODO needs icon on hover to use) --- */
.btn-warning {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border-color: var(--bs-light);
  font-weight: 500;
}

.btn-warning:hover,
.btn-warning:focus {
  color: var(--bs-light);
  background-color: var(--bs-secondary);
  border-color: var(--bs-light);
  /* @TODO Need to add arrow icon - or maybe as separate class if that is how it should be done? */
}

/* --- Light / Dark --- */
.btn-light {
  color: var(--bs-light);
  background-color: transparent;
  /* #TODO To answer - Al is this okay or should it be var(--bs-border-color)? */
  border: 2px solid var(--bs-light);
}

.btn-light:hover,
.btn-light:focus {
  color: var(--bs-dark);
  background-color: var(--bs-info);
  border-color: var(--bs-light);
  transition: all 0.2s;
  /* Maybe change to none */
}

.btn-dark {
  color: var(--bs-dark);
  background-color: transparent;
  /* #TODO To answer - Al is this okay or should it be var(--bs-border-color)? */
  border: 2px solid var(--bs-dark);
}

.btn-dark:hover,
.btn-dark:focus {
  color: var(--bs-dark) !important;
  background-color: var(--bs-info) !important;
  border-color: var(--bs-dark);
  /* #TODO Maybe remove */
  transition: all 0.2s;
  /* Maybe change to none */
}

.btn-light-hover:hover,
.btn-light-hover:focus-visible {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: var(--bs-dark) !important;
}