/**
 * @file
 * Compiled output of scss/theme-purple.scss — the "Purple" colour theme.
 *
 * DO NOT EDIT BY HAND beyond keeping it in sync with the SCSS source. This is
 * the file actually loaded by the `sp/theme-purple` asset library, because
 * Drupal libraries load CSS (the theme toolchain has no SASS compiler).
 *
 * Scoped to body[data-theme="purple"], toggled by js/theme-switcher.js.
 */

/* Floating theme switcher control (rendered in every theme). */
.theme-switcher {
  position: fixed;
  z-index: 1000;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background-color: #28217f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-switcher__icon {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 50%;
  background-color: currentColor;
}

.theme-switcher:hover,
.theme-switcher:focus-visible {
  filter: brightness(1.1);
}

/* Purple theme scope. */
body[data-theme="purple"] {
  background-color: #28217f;
  color: #ffffff;
}

body[data-theme="purple"] a {
  color: #ffffff;
  text-decoration: underline;
}

body[data-theme="purple"] .container {
  background-color: #28217f;
  color: #ffffff;
}

/* "Light" buttons within the purple scope (light background, dark text). */
body[data-theme="purple"] .button,
body[data-theme="purple"] button:not(.theme-switcher),
body[data-theme="purple"] input[type="submit"],
body[data-theme="purple"] input[type="button"],
body[data-theme="purple"] .su-button {
  color: #28217f;
  border-color: #ffffff;
  background-color: #ffffff;
}

body[data-theme="purple"] .button:hover,
body[data-theme="purple"] .button:focus,
body[data-theme="purple"] button:not(.theme-switcher):hover,
body[data-theme="purple"] button:not(.theme-switcher):focus,
body[data-theme="purple"] input[type="submit"]:hover,
body[data-theme="purple"] input[type="submit"]:focus,
body[data-theme="purple"] input[type="button"]:hover,
body[data-theme="purple"] input[type="button"]:focus,
body[data-theme="purple"] .su-button:hover,
body[data-theme="purple"] .su-button:focus {
  color: #28217f;
  background-color: #f0f0f0;
}

/* While purple is active the switcher adopts the inverse (light) treatment. */
body[data-theme="purple"] .theme-switcher {
  color: #28217f;
  background-color: #ffffff;
}