/*
 * Atlas theme on top of the stock Bootstrap 5.3 CSS.
 *
 * Bootstrap's global variables cover colours, fonts and links. Components bake
 * their own colours in at compile time, so the ones the app uses get their
 * local variables overridden below, derived from the Atlas tokens.
 */

:root {
  --atlas-primary: #009688;
  --atlas-primary-rgb: 0, 150, 136;
  --atlas-danger: #cc0000;
  --atlas-heading: #34495e;
  --atlas-muted: #888;
  --atlas-border: rgba(17, 17, 17, 0.1);
  --atlas-shadow: 0 2px 3px rgba(17, 17, 17, 0.1), 0 0 0 1px rgba(17, 17, 17, 0.1);

  --bs-primary: var(--atlas-primary);
  --bs-primary-rgb: var(--atlas-primary-rgb);
  --bs-danger: var(--atlas-danger);
  --bs-danger-rgb: 204, 0, 0;
  --bs-danger-text-emphasis: #7a0000;
  --bs-danger-bg-subtle: #f5cccc;
  --bs-danger-border-subtle: #f0b3b3;
  --bs-info: #9933cc;
  --bs-info-rgb: 153, 51, 204;

  --bs-font-sans-serif: "Roboto", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-color: #444;
  --bs-body-color-rgb: 68, 68, 68;
  --bs-body-bg: #f1f1f1;
  --bs-body-bg-rgb: 241, 241, 241;
  --bs-link-color: var(--atlas-primary);
  --bs-link-color-rgb: var(--atlas-primary-rgb);
  --bs-link-hover-color: #00776c;
  --bs-link-hover-color-rgb: 0, 119, 108;
}

.btn {
  --bs-btn-font-weight: normal;
  --bs-btn-color: #444;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--atlas-primary);
  --bs-btn-border-color: var(--atlas-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--atlas-primary), white 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--atlas-primary), white 10%);
  --bs-btn-focus-shadow-rgb: var(--atlas-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--atlas-primary), white 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--atlas-primary), white 10%);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--atlas-primary);
  --bs-btn-disabled-border-color: var(--atlas-primary);
}

.btn-danger {
  --bs-btn-bg: var(--atlas-danger);
  --bs-btn-border-color: var(--atlas-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--atlas-danger), black 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--atlas-danger), black 20%);
  --bs-btn-focus-shadow-rgb: 212, 38, 38;
  --bs-btn-active-bg: color-mix(in srgb, var(--atlas-danger), black 20%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--atlas-danger), black 25%);
  --bs-btn-disabled-bg: var(--atlas-danger);
  --bs-btn-disabled-border-color: var(--atlas-danger);
}

.dropdown-menu {
  --bs-dropdown-color: #444;
  --bs-dropdown-bg: #222;
  --bs-dropdown-divider-bg: rgba(255, 255, 255, 0.1);
  --bs-dropdown-box-shadow: var(--atlas-shadow);
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: var(--atlas-primary);
  --bs-dropdown-link-active-bg: var(--atlas-primary);
  --bs-dropdown-link-disabled-color: #444;
  --bs-dropdown-header-color: #444;
}

.badge {
  --bs-badge-font-weight: bold;
  --bs-badge-border-radius: 10px;
}

.table {
  --bs-table-border-color: #ccc;
}

.pagination {
  --bs-pagination-color: #333;
  --bs-pagination-bg: #fcfcfc;
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--atlas-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--atlas-primary-rgb), 0.25);
  --bs-pagination-active-bg: var(--atlas-primary);
  --bs-pagination-active-border-color: var(--atlas-primary);
  --bs-pagination-disabled-color: #aaa;
  --bs-pagination-disabled-bg: #ddd;
}

.tooltip {
  --bs-tooltip-bg: rgba(0, 0, 0, 0.9);
  --bs-tooltip-arrow-width: 5px;
}

.form-control,
.form-select {
  background-color: #fff; /* Bootstrap 5.3 uses the (grey) page background */

  &:focus {
    border-color: color-mix(in srgb, var(--atlas-primary), white 50%);
    box-shadow: 0 0 0 0.25rem rgba(var(--atlas-primary-rgb), 0.25);
  }
}