@mcgill-wsg/mcgill-ds/dist/css/mds.css

McGill Design System - a set of components and styles to adhere to McGill University standards.

/* MDS Base fundamental styles for HTML tags */

:root {
  /* Container width */
  --mds-container-max-width: 100%;
  /* Themes */
  @property --mds-theme {
    syntax: "<custom-ident>";

    inherits: true;

    initial-value: light;
  }
  /* Colors */
  /**
  * @tokens Primary
  * @presenter Color
  */
  --mds-color-primary-500: #ed1b2f;
  --mds-color-primary-800: #9e0918;
  /**
  * @tokens Utility
  * @presenter Color
  */
  --mds-color-a11y: #bcade2;
  /**
  * @tokens Greyscale
  * @presenter Color
  */
  --mds-color-black: #000;
  --mds-color-gray-900: hsl(0deg 0% 12% / 100%);
  --mds-color-gray-600: hsl(0deg 1% 27% / 100%);
  --mds-color-gray-500: hsl(0deg 1% 32% / 100%);
  --mds-color-gray-400: hsl(0deg 0% 46% / 100%);
  --mds-color-gray-300: hsl(0deg 1% 60% / 100%);
  --mds-color-gray-200: hsl(220deg 13% 91% / 100%);
  --mds-color-gray-100: #f4f4f4;
  --mds-color-white: #fff;
  /**
  * @tokens Success
  * @presenter Color
  */
  --mds-color-success-500: #009582;
  --mds-color-success-100: #d7f1ea;
  /**
  * @tokens Error
  * @presenter Color
  */
  --mds-color-error-500: #d14444;
  --mds-color-error-100: #fadbd6;
  /**
  * @tokens Warning
  * @presenter Color
  */
  --mds-color-warning-500: #de8706;
  --mds-color-warning-100: #ffe4b7;
  /**
  * @tokens Info
  * @presenter Color
  */
  --mds-color-info-500: #03a9f4;
  --mds-color-info-100: #cdeefd;
  /**
  * @tokens Radius
  * @presenter BorderRadius
  */
  --mds-border-radius: 0.25rem;
  /**
  * @tokens Shadow
  * @presenter Shadow
  */
  /* TODO: These should be in rem or standard spacing units. */
  --mds-shadow-small: 0 1px 2px var(--mds-color-gray-300);
  --mds-shadow-large: 0 4px 8px var(--mds-color-gray-300);
  /**
  * @tokens Spacing
  * @presenter Spacing
  */
  --space-unit: 0.75rem; /* Unit for smaller devices */
  --mds-spacing-2x-small: calc(0.25 * var(--space-unit));
  --mds-spacing-x-small: calc(0.5 * var(--space-unit));
  --mds-spacing-small: calc(0.75 * var(--space-unit));
  --mds-spacing-medium: calc(1.25 * var(--space-unit));
  --mds-spacing-large: calc(1.75 * var(--space-unit));
  --mds-spacing-x-large: calc(2.25 * var(--space-unit));
  --mds-spacing-2x-large: calc(3 * var(--space-unit));
  /**
  * @tokens Deprecated
  */
  --mds-spacing-xx-small: calc(0.25 * var(--space-unit));
  /**
  * @tokens Border
  * @presenter Border
  */
  --mds-border-thin-light: 1px solid var(--mds-color-gray-300);
  --mds-border-thin: 1px solid var(--mds-color-gray-900);
  --mds-border-medium: 2px solid var(--mds-color-gray-900);
  --mds-border-thick: 5px solid var(--mds-color-primary-500);
  --mds-border-error: 3px solid var(--mds-color-primary-500);
  --mds-border-info: 1px dotted var(--mds-color-gray-900);
  /**
  * @tokens Transition
  * @presenter Easing
  */
  /*
    TODO:
      These curves describe acceleration (transition-timing-functions), not speed, we should rename them.
      They are are also not useful by themselves without a duration value.
      The current names are misleading.
    */
  --mds-transition-slow: cubic-bezier(0.21, 0, 0.85, 1);
  --mds-transition-medium: cubic-bezier(0.59, 0, 0.47, 1);
  --mds-transition-fast: cubic-bezier(0.89, 0.01, 0.02, 1.03);
  /* TODO: we need proper values and scales for these, as of now, they are arbitrary: */
  --mds-transition-delay-short: 0.1s;
  --mds-transition-duration-short: 0.3s;
  /**
  * Typography tokens
  * @tokens Font families
  * @presenter FontFamily
  */
  --mds-font-mono: sfmono-regular, consolas, "Liberation Mono", menlo, monospace;
  /* San-serif */
  --mds-font-sans:
    mcgillsans-regular,
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    roboto,
    helvetica,
    arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  --mds-font-sans-medium:
    mcgillsans-medium,
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    roboto,
    helvetica,
    arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  --mds-font-sans-bold:
    mcgillsans-bold,
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    roboto,
    helvetica,
    arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  --mds-font-sans-italic:
    mcgillsans-italic,
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    roboto,
    helvetica,
    arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  --mds-font-sans-bold-italic:
    mcgillsans-bolditalic,
    -apple-system,
    blinkmacsystemfont,
    "Segoe UI",
    roboto,
    helvetica,
    arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  /* Serif */
  --mds-font-serif: mcgillserif-regular, georgia, "Times New Roman", serif;
  --mds-font-serif-medium: mcgillserif-medium, georgia, "Times New Roman", serif;
  --mds-font-serif-bold: mcgillserif-bold, georgia, "Times New Roman", serif;
  --mds-font-serif-bold-italic: mcgillserif-bolditalic, georgia, "Times New Roman", serif;
  --mds-font-serif-italic: mcgillserif-italic, georgia, "Times New Roman", serif;
  /**
  * @tokens Font size
  * @presenter FontSize
  */
  --max-vw: 80; /* 1280px wide */
  /* Fixed font sizes without viewport scaling. */
  --mds-font-size-large-fixed: 1.25rem;
  --mds-font-size-x-large-fixed: 1.5rem;
  --mds-font-size-xx-large-fixed: 2rem;
  --mds-font-size-xxx-large-fixed: 2.25rem;
  /* Default Responsive font sizes with viewport scaling. */
  --mds-font-size-small: clamp(0.875rem, calc(0.88 / var(--max-vw) * 100vw), 0.88rem);
  --mds-font-size-medium: clamp(1rem, calc(1 / var(--max-vw) * 100vw), 1rem);
  --mds-font-size-large: clamp(var(--mds-font-size-large-fixed), calc(1.58 / var(--max-vw) * 100vw), 1.58rem);
  --mds-font-size-x-large: clamp(var(--mds-font-size-x-large-fixed), calc(1.75 / var(--max-vw) * 100vw), 1.75rem);
  --mds-font-size-xx-large: clamp(var(--mds-font-size-xx-large-fixed), calc(2.88 / var(--max-vw) * 100vw), 2.88rem);
  --mds-font-size-xxx-large: clamp(var(--mds-font-size-xxx-large-fixed), calc(3.842 / var(--max-vw) * 100vw), 3.842rem);
  /* Font weights  */
  --mds-font-weight-light: 300;
  --mds-font-weight-normal: 400;
  --mds-font-weight-semibold: 500;
  --mds-font-weight-bold: 700;
  /* Icon size. */
  --mds-icon-size-small: 1em;
  --mds-icon-size-normal: 1.4em;
  --mds-icon-size-medium: 2em;
  /* Logo size. */
  --mds-logo-size: 184px;
  /**
  * @tokens Line height
  * @presenter LineHeight
  */
  --mds-line-height-dense: 1.2;
  --mds-line-height-normal: 1.4;
  --mds-line-height-loose: 1.8;
  /**
  * @tokens Z-index
  * @presenter Shadow
  */
  --mds-z-index-drawer: 700;
  --mds-z-index-dialog: 800;
  --mds-z-index-dropdown: 900;
  --mds-z-index-toast: 950;
  --mds-z-index-tooltip: 1000;
}

/* larger screens */

@media (min-width: 720px) {
  :root {
    /* Space options are based on the --space-unit value. */
    --space-unit: 1rem;
  }
}

/* Wide container at larger viewports. */

@media screen and (min-width: 1200px) {
  :root {
    --mds-container-max-width: 1170px;
  }
}

/* MDS font-face definitions. */

/* Sans-regular. */

@font-face {
  font-family: McGillSans-Regular;

  src: url("../assets/fonts/McGillSans-Regular.eot");

  src:
    url("../assets/fonts/McGillSans-Regular.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSans-Regular.woff") format("woff"),
    url("../assets/fonts/McGillSans-Regular.ttf") format("truetype");

  font-display: swap;
}

/* Sans-medium. */

@font-face {
  font-family: McGillSans-Medium;

  src: url("../assets/fonts/McGillSans-Medium.eot");

  src:
    url("../assets/fonts/McGillSans-Medium.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSans-Medium.woff") format("woff"),
    url("../assets/fonts/McGillSans-Medium.ttf") format("truetype");

  font-display: swap;
}

/* Sans-bold. */

@font-face {
  font-family: McGillSans-Bold;

  src: url("../assets/fonts/McGillSans-Bold.eot");

  src:
    url("../assets/fonts/McGillSans-Bold.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSans-Bold.woff") format("woff"),
    url("../assets/fonts/McGillSans-Bold.ttf") format("truetype");

  font-display: swap;
}

/* Sans-italic. */

@font-face {
  font-family: McGillSans-Italic;

  src: url("../assets/fonts/McGillSans-Italic.eot");

  src:
    url("../assets/fonts/McGillSans-Italic.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSans-Italic.woff") format("woff"),
    url("../assets/fonts/McGillSans-Italic.ttf") format("truetype");

  font-display: swap;
}

/* Sans-bold italic. */

@font-face {
  font-family: McGillSans-BoldItalic;

  src: url("../assets/fonts/McGillSans-BoldItalic.eot");

  src:
    url("../assets/fonts/McGillSans-BoldItalic.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSans-BoldItalic.woff") format("woff"),
    url("../assets/fonts/McGillSans-BoldItalic.ttf") format("truetype");

  font-display: swap;
}

/*
 Serif
 */

/* Serif-regular. */

@font-face {
  font-family: McGillSerif-Regular;

  src: url("../assets/fonts/McGillSerif-Regular.eot");

  src:
    url("../assets/fonts/McGillSerif-Regular.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSerif-Regular.woff") format("woff"),
    url("../assets/fonts/McGillSerif-Regular.ttf") format("truetype");

  font-display: swap;
}

/* Serif-medium. */

@font-face {
  font-family: McGillSerif-Medium;

  src: url("../assets/fonts/McGillSerif-Medium.eot");

  src:
    url("../assets/fonts/McGillSerif-Medium.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSerif-Medium.woff") format("woff"),
    url("../assets/fonts/McGillSerif-Medium.ttf") format("truetype");

  font-display: swap;
}

/* Serif-bold. */

@font-face {
  font-family: McGillSerif-Bold;

  src: url("../assets/fonts/McGillSerif-Bold.eot");

  src:
    url("../assets/fonts/McGillSerif-Bold.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSerif-Bold.woff") format("woff"),
    url("../assets/fonts/McGillSerif-Bold.ttf") format("truetype");

  font-display: swap;
}

/* Serif-bold italic. */

@font-face {
  font-family: McGillSerif-BoldItalic;

  src: url("../assets/fonts/McGillSerif-BoldItalic.eot");

  src:
    url("../assets/fonts/McGillSerif-BoldItalic.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSerif-BoldItalic.woff") format("woff"),
    url("../assets/fonts/McGillSerif-BoldItalic.ttf") format("truetype");

  font-display: swap;
}

/* Serif-italic. */

@font-face {
  font-family: McGillSerif-Italic;

  src: url("../assets/fonts/McGillSerif-Italic.eot");

  src:
    url("../assets/fonts/McGillSerif-Italic.eot?#iefix")
    format("embedded-opentype"),
    url("../assets/fonts/McGillSerif-Italic.woff") format("woff"),
    url("../assets/fonts/McGillSerif-Italic.ttf") format("truetype");

  font-display: swap;
}

/*

    Utility and helper classes applies low level narrow scope adjustments
    (often providing only one declaration) and
    has very high specificity, which can override previous styles.
    It can be reused and is not tied to any specific piece of UI.

TODO:
 - Discuss changing the lengthy utility names from mds-u-?? to something like --u-??
*/

/* Center content. */

.mds-mx--center {
  margin-left: auto;
  margin-right: auto;
}

/*
    Margins.
    TODO: we should consider replacing sm, md and large with 1, 2, 3 instead
*/

/* Y axis margin */

.mds-my--small {
  margin-top: var(--mds-spacing-small);
  margin-bottom: var(--mds-spacing-small);
}

.mds-my--large {
  margin-top: var(--mds-spacing-large);
  margin-bottom: var(--mds-spacing-large);
}

/* Top margin */

.mds-mt--small {
  margin-top: var(--mds-spacing-small);
}

.mds-mt--large {
  margin-top: var(--mds-spacing-x-large);
}

/* Bottom margin */

.mds-mb--small {
  margin-bottom: var(--mds-spacing-small);
}

.mds-mb--large {
  margin-bottom: var(--mds-spacing-x-large);
}

/* Right margin */

.mds-mr--small {
  margin-right: var(--mds-spacing-small);
}

.mds-mr--large {
  margin-right: var(--mds-spacing-x-large);
}

/* Left margin */

.mds-ml--small {
  margin-left: var(--mds-spacing-small);
}

.mds-ml--large {
  margin-left: var(--mds-spacing-x-large);
}

/*
 Type utilities.
 */

/* Alignment */

.mds-text--center {
  text-align: center;
}

.mds-text--right {
  text-align: right;
}

.mds-text--left {
  text-align: left;
}

.mds-text--justify {
  text-align: justify;
}

/* Size */

.mds-text--small {
  font-size: var(--mds-font-size-small);
}

.mds-text--medium {
  font-size: var(--mds-font-size-medium);
}

.mds-text--large {
  font-size: var(--mds-font-size-large);
}

.mds-text--x-large {
  font-size: var(--mds-font-size-x-large);
}

.mds-text--xx-large {
  font-size: var(--mds-font-size-xx-large);
}

.mds-text--xxx-large {
  font-size: var(--mds-font-size-xxx-large);
}

/* Fixed font-size on any viewport i.e., no scaling. */

.mds-text--large-fixed {
  font-size: var(--mds-font-size-large-fixed);
}

.mds-text--x-large-fixed {
  font-size: var(--mds-font-size-x-large-fixed);
}

.mds-text--xx-large-fixed {
  font-size: var(--mds-font-size-xx-large-fixed);
}

.mds-text--xxx-large-fixed {
  font-size: var(--mds-font-size-xxx-large-fixed);
}

/*
 List utilities.
 */

.mds-list--none {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* The following is cribbed from the Drupal hidden.module.css and prefixed with mds. */

/* TODO: we may want to document these utilities in storybook if we have time. */

/**
 * @file
 * Utility classes to hide elements in different ways.
 */

/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be collapsible details that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */

.mds-hidden {
  display: none;
}

/**
 * Hide elements visually, but keep them available for screen readers.
 *
 * Used for information required for screen reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */

.mds-visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

/**
 * The .focusable class extends the .visually-hidden class to allow
 * the element to be focusable when navigated to via the keyboard.
 */

.mds-visually-hidden.focusable:active,
.mds-visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
}

/**
 * Hide visually and from screen readers, but maintain layout.
 */

.mds-invisible {
  visibility: hidden;
}

/*
  TODO:
   Other utilities to consider for the future.
    - Z-index
    - Transition
    - Container
*/

/*

  A 'Layout utility' class applies to high level non-cosmetic structural pattern
  such as container, wrappers and layout systems.

  Used on anything eg., components, block or elements.

  Note: Making modifications to these types of class could potentially have
  side effects in a lot of other unrelated places - make sure to test any changes.

  */

/*
    File contains classes used for simple layouts of components
    Boxes should be placed in Grids for better visual alignment.
   - Fully baked components top and bottom margin will have to be added manually.

   TODO:
   - Confirm if gutters are expected by default.
   - Hiding content on different devices (probably out of scope).
*/

/*
 * Simple Grid layout options.
 */

/* Apply grid display defaults to classes prefixed with 'mds-o-grid-' */

div[class*="mds-l-grid-"],
div[class*=" mds-l-grid-"] {
  align-items: var(--align, stretch);
  display: grid;
  gap: var(--gap, 0);
  grid-template-columns: repeat(var(--col-number, 1), minmax(0, 1fr));
}

.mds-l-grid--cols-2 {
  --col-number: 2;
}

.mds-l-grid--cols-3 {
  --col-number: 3;
}

/*
  TODO: Reconsider if we should support multiple sets of grids for different
    sized devices, since we could provide on set an male that one set
    responsive across all devices.
    */

/* Classes that effect larger displays such as desktop. */

@media (min-width: 720px) {
  .mds-l-grid--desktop-3 {
    --col-number: 3;
  }

  .mds-l-grid--desktop-2 {
    --col-number: 2;
  }
}

/*
 Boxes with various defined spacing.
 Padding is used to maintain vertical alignment
 and avoid collapsed spacing.
 */

.mds-l-box--small {
  padding: var(--mds-spacing-medium);
}

.mds-l-box--standard {
  padding: var(--mds-spacing-large);
}

/* Flex. */

[class*="mds-l-flex"],
[class*=" mds-l-flex"] {
  /*
      TODO: align-items and gap could be a component (block or modifier) exceptions.
       Risk overloading the utility with too many properties.
     */
  display: flex;
  /* Direction could be switched to row if needed. */
  flex-flow: var(--direction, column) var(--wrap, wrap);
  align-items: var(--align, stretch);
  gap: var(--gap, var(--mds-spacing-small));
  justify-content: var(--justify, center);
}

.mds-l-flex-col {
  --direction: column;
}

.mds-l-flex-row {
  --direction: row;
  --gap: var(--mds-spacing-x-large);
}

/* No justify-content for larger screens for mds-l-flex. */

/* TODO: when container-queries are broadly supported, this would be a great
place for one! */

@media (min-width: 720px) {
  .mds-l-flex-col {
    --justify: start;
  }

  .mds-l-flex-row {
    --justify: start;
  }
}

/*
 Flex utilities.
 */

/* Align - top to bottom */

.mds-l-align--center {
  --align: center;
}

.mds-l-align--end {
  --align: flex-end;
}

.mds-l-align--start {
  --align: flex-start;
}

.mds-l-align--stretch {
  --align: stretch;
}

/* Justify - right to left */

.mds-l-justify--start {
  --justify: flex-start;
}

.mds-l-justify--end {
  --justify: flex-end;
}

.mds-l-justify--around {
  --justify: space-around;
}

.mds-l-justify--between {
  --justify: space-between;
}

.mds-l-justify--evenly {
  --justify: space-evenly;
}

/*
 Gap setting for Grid and Flex Objects.
 */

.mds-l-gap--1 {
  --gap: var(--mds-spacing-small);
}

.mds-l-gap--2 {
  --gap: var(--mds-spacing-large);
}

.mds-l-gap--3 {
  --gap: var(--mds-spacing-x-large);
}

/* Legacy theme file.
*  This file is deprecated and will be removed in the future.
*  Please use mds-theme.css instead.
* TODO: Style forms in dark mode leveraging style queries. For some reason some styles are not being inherited.
*/

.mds-dark {
  --heading-color: var(--mds-color-white);
  --border-style: var(--mds-border-thin-light);
  --color-text: var(--mds-color-gray-200);
  --bg-color: var(--mds-color-black);
  background: var(--bg-color);
  color: var(--color-text);
}

.mds-dark a {
  --link-color: var(--mds-color-white);
}

.mds-dark a:hover {
  --decoration: underline;
}

/*
 Button styling.
 */

.mds-dark :is(button, .mds-button, input[type="reset"], ::part(toggle-button)) {
  --color-background: transparent;
  --color-border: var(--mds-color-white);
  --color-text: var(--mds-color-white);
}

.mds-dark :is(button, .mds-button, input[type="reset"], ::part(toggle-button)):hover {
  --color-background: var(--mds-color-white);
  --color-border: transparent;
  --color-text: var(--mds-color-black);
  --decoration: none;
}

/* Secondary button - Dark mode */

.mds-dark .mds-button.mds-button--secondary {
  --color-background: var(--mds-color-white);
  --color-border: var(--mds-color-white);
  --color-text: var(--mds-color-black);
}

.mds-dark .mds-button.mds-button--secondary:hover {
  --color-background: transparent;
  --color-border: var(--mds-color-white);
  --color-text: var(--mds-color-white);
}

/* Branded button. */

.mds-dark .mds-button.mds-button--branded {
  --color-background: var(--mds-color-primary-500);
  --color-border: var(--mds-color-primary-500);
  --color-text: var(--mds-color-white);
}

.mds-dark .mds-button.mds-button--branded:hover {
  --color-background: transparent;
  --color-border: var(--mds-color-primary-500);
  --color-text: var(--mds-color-primary-500);
}

/* Input styling. */

.mds-dark :where(input, textarea, select) {
  --focus: 2px var(--mds-color-white);
  --color-background: transparent;
  --input-border: var(--mds-border-thin-light);
  --color-text: var(--mds-color-gray-100);
}

/* Disabled input and elements. */

.mds-dark :is(input[disabled], :disabled) {
  --color-background: var(--mds-color-gray-500);
}

.mds-dark :disabled input {
  --color-border: transparent;
}

/* Toggle-switch rendering of a checkbox styling. */

.mds-dark input[type="checkbox"].mds-switch {
  --ab: var(--mds-color-white);
}

.mds-dark input[type="checkbox"].mds-switch:checked {
  --ab: var(--mds-color-black);
  --color-background: var(--mds-color-white);
}

/* Checkbox and radio button. */

.mds-dark input[type="checkbox"]::after {
  border: var(--border-width) solid var(--mds-color-white);
  border-top: 0;
  border-left: 0;
}

.mds-dark input[type="radio"]:is(:checked,:focus),
.mds-dark input[type="checkbox"]:is(:checked,:focus) {
  --color-background: var(--mds-color-black);
}

.mds-dark input[type="radio"]::after {
  background: var(--mds-color-white);
}

.mds-dark input[type="submit"] {
  --color-background: var(--mds-color-white);
  --color-border: var(--mds-color-white);
  --color-text: var(--mds-color-gray-900);
  --input-border: 2px solid var(--mds-color-white);
}

.mds-dark input[type="submit"]:hover {
  --color-background: var(--mds-color-black);
  --color-border: var(--mds-color-white);
  --color-text: var(--mds-color-white);
}

/*
 Theme.
*/

/*
 MDS Dark theme
 */

.mds-dark {
  --mds-theme: dark;
  --theme-color: var(--mds-color-white);
  --theme-background-color: var(--mds-color-black);
  background: var(--theme-background-color, var(--mds-color-black));
  color: var(--theme-color, var(--mds-color-white));
}

/* Enable style containment for theme containers */

@container style(--mds-theme: dark) {
  :root {
    --link-color: var(--mds-color-white);
    --heading-color: var(--mds-color-white);
    --border-style: var(--mds-border-thin-light);
    --color-text: var(--mds-color-gray-200);
    --bg-color: var(--mds-color-black);
  }

  a:hover {
    --decoration: underline;
  }

  :is(button, .mds-button, input[type="reset"], ::part(toggle-button)) {
    --color-background: transparent;
    --color-border: var(--mds-color-white);
    --color-text: var(--mds-color-white);
  }

  :is(button, .mds-button, input[type="reset"], ::part(toggle-button)):hover {
    --color-background: var(--mds-color-white);
    --color-border: transparent;
    --color-text: var(--mds-color-black);
    --decoration: none;
  }

  .mds-button.mds-button--secondary {
    --color-background: var(--mds-color-white);
    --color-border: var(--mds-color-white);
    --color-text: var(--mds-color-black);
  }

  .mds-button.mds-button--secondary:hover {
    --color-background: transparent;
    --color-border: var(--mds-color-white);
    --color-text: var(--mds-color-white);
  }

  /* Branded button. */

  .mds-button.mds-button--branded {
    --color-background: var(--mds-color-primary-500);
    --color-border: var(--mds-color-primary-500);
    --color-text: var(--mds-color-white);
  }

  .mds-button.mds-button--branded:hover {
    --color-background: transparent;
    --color-border: var(--mds-color-primary-500);
    --color-text: var(--mds-color-primary-500);
  }

  /* Input styling. */

  :where(input, textarea, select) {
    --focus: 2px var(--mds-color-white);
    --color-background: transparent;
    --input-border: var(--mds-border-thin-light);
    --color-text: var(--mds-color-gray-100);
  }

  /* Disabled input and elements. */

  :is(input[disabled], :disabled) {
    --color-background: var(--mds-color-gray-500);
  }

  :disabled input {
    --color-border: transparent;
  }

  /* Toggle-switch rendering of a checkbox styling. */

  input[type="checkbox"].mds-switch {
    --ab: var(--mds-color-white);
  }

  input[type="checkbox"].mds-switch:checked {
    --ab: var(--mds-color-black);
    --color-background: var(--mds-color-white);
  }

  /* Checkbox and radio button. */

  input[type="checkbox"]::after {
    border: var(--border-width) solid var(--mds-color-white);
    border-top: 0;
    border-left: 0;
  }

  input[type="radio"]:is(:checked,:focus),
  input[type="checkbox"]:is(:checked,:focus) {
    --color-background: var(--mds-color-black);
  }

  input[type="radio"]::after {
    background: var(--mds-color-white);
  }

  input[type="submit"] {
    --color-background: var(--mds-color-white);
    --color-border: var(--mds-color-white);
    --color-text: var(--mds-color-gray-900);
    --input-border: 2px solid var(--mds-color-white);
  }

  input[type="submit"]:hover {
    --color-background: var(--mds-color-black);
    --color-border: var(--mds-color-white);
    --color-text: var(--mds-color-white);
  }
}

/*
   MDS Light theme: default theme.
   */

.mds-light {
  --mds-theme: light;
  --theme-color: var(--mds-color-black);
  --theme-background-color: var(--mds-color-white);
  background: var(--theme-background-color, var(--mds-color-white));
  color: var(--theme-color, var(--mds-color-black));
}

/* We use normalize as our reset solution.  */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* TODO: Replace tailwind utilities (e.g., .p-4) with a mds grid framework - WMS-24034	*/

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.relative {
  position: relative;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.border {
  border-width: 1px;
}

.text-left {
  text-align: left;
}

.italic {
  font-style: italic;
}

*, ::before, ::after {
  --tw-shadow: 0 0 #0000;
}

*, ::before, ::after {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/*
 Normalize overrides.
 */

/*
  Consistent box-sizing
  - making it easier to change alternative component box-sizing
*/

html {
  box-sizing: border-box;
  /* Unit-less line-height so child elements inherit the raw number value */
  line-height: 1.5;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

button,
input,
optgroup,
select,
textarea {
  line-height: 1.5;
}

/* Removes margin on elements. */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

/* Default font-weight. */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: initial;
}

/* Vertically align elements. */

svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/* Remove margin and padding on fieldset element. */

fieldset {
  margin: 0;
  padding: 0;
}

/* Details element. */

details summary {
  cursor: pointer;
}

details summary > * {
  /* Avoid undesirable wrapping. */
  display: inline;
}

/*
  TODO:
  - ensure mds-heading classes also have the other properties like line-height
 */

/**
  Typography.
*/

h1,
.mds-h1 {
  font-family: var(--mds-font-serif);
  font-size: var(--mds-font-size-xx-large);
}

h2,
.mds-h2 {
  --heading-top-margin: var(--mds-spacing-x-large);
  font-family: var(--mds-font-serif);
  font-size: var(--mds-font-size-x-large);
}

h3,
.mds-h3 {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-font-size-large);
}

h4,
.mds-h4 {
  font-family: var(--mds-font-serif-medium);
  font-size: var(--mds-font-size-medium);
  color: var(--heading-color, var(--mds-color-gray-600));
}

h5,
.mds-h5 {
  font-family: var(--mds-font-sans-medium);
  font-size: var(--mds-font-size-medium);
  color: var(--heading-color, var(--mds-color-gray-600));
}

:is(h1, h2, h3, h4, h5) {
  line-height: var(--mds-line-height-dense);
  margin-bottom: var(--heading-bottom-margin, var(--mds-spacing-2x-small));
  margin-top: var(--heading-top-margin, var(--mds-spacing-medium));
}

/* Headings with direct paragraph siblings will have tighter space. */

p + :is(h3, h4, h5) {
  --heading-top-margin: var(--mds-spacing-medium);
}

/* Spacing between different heading elements. */

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
  --heading-top-margin: var(--mds-spacing-small);
}

/* Spacing between the heading elements. */

h1 + h1,
h2 + h2,
h3 + h3,
h4 + h4,
h5 + h5,
h6 + h6 {
  --heading-top-margin: var(--mds-spacing-large);
}

/* First child Headings should reside flush to the top of the container. */

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  --heading-top-margin: 0;
}

/* Body font. */

html {
  font-family: var(--mds-font-sans);
}

/* Bold font weight usually used on paragraphs. */

b,
strong {
  /*  User browser native style. */
}

.mds-copy--bold {
  font-family: var(--mds-font-sans-bold);
}

/* Standard italics. */

.mds-copy--italic {
  font-family: var(--mds-font-sans-italic);
}

em :where(strong, b) {
  /*  User browser native style. */
}

/*
 Header variations.
 */

/* Serif italic. */

h1 em {
  font-family: var(--mds-font-serif-italic);
  font-style: normal;
}

h2 em {
  font-family: var(--mds-font-serif-italic);
  font-style: normal;
}

h3 em {
  font-family: var(--mds-font-serif-italic);
  font-style: normal;
}

h4 em {
  font-family: var(--mds-font-serif-italic);
  font-style: normal;
}

/* Sans italic. */

h5 em {
  font-family: var(--mds-font-sans-italic);
  font-style: normal;
}

h6 em {
  font-family: var(--mds-font-sans-italic);
  font-style: normal;
}

/* For expanded text on long hover of an abbreviation, include the title attribute. */

abbr {
  cursor: help;
  border-bottom: var(--mds-border-info);
}

/* Contact information. */

address {
  margin-bottom: var(--mds-spacing-medium);
}

/*
 Cite should not be nested in blockquotes
 see https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-cite-element
 */

cite {
  font-style: normal;
  font-weight: bold;
  font-size: var(--mds-font-size-small);
}

/*
  Lists.
  */

ol {
  list-style-position: inside; /* Allow custom 'type' attribute while keeping 'inside' alignment */
}

ul {
  list-style-position: inside; /* Allow custom 'type' attribute while keeping 'inside' alignment */
}

li {
  line-height: var(--mds-line-height-normal);
  margin-bottom: var(--list-item-margin-bottom, var(--mds-spacing-x-small));
}

/* Paragraph styling. */

p {
  font-size: var(--mds-font-size-medium);
  line-height: var(--mds-line-height-normal);
  margin: var(--paragraph-top-margin, var(--mds-spacing-small)) 0 var(--paragraph-bottom-margin, 0) 0;
  color: var(--color-text, var(--mds-color-gray-900));
}

/*
 Quotes.
 */

/* Quoting blocks of content from another source. */

blockquote,
blockquote > p,
.mds-text-quote--pulled {
  margin: var(--mds-spacing-large) 0;
  font-size: var(--mds-font-size-x-large);
  font-family: var(--mds-font-serif-italic);
  line-height: var(--mds-line-height-loose);
}

p:first-child {
  --paragraph-top-margin: 0;
  --paragraph-bottom-margin: var(--mds-spacing-small);
}

/* Anchor tags in specified elements will have a standard text underline. mds-button is excluded. */

:where(p,dl) a:is(:not(.mds-button)) {
  --decoration: underline;
}

/* Unordered list with in paragraphs display with a disc. */

p ul {
  list-style: disc;
}

/* Load the correct font family for combinations of bold and italics in paragraphs. */

p :where(em > strong, strong > em, i > strong, strong > i) {
  /* TODO: i think we can remove this. */
  /* font-family: var(--mds-font-sans-bold-italic); */
}

/*
  Description.
  A list of terms with their associated descriptions.
*/

dl {
  margin-bottom: var(--mds-spacing-medium);
}

dt {
  font-weight: bold;
}

dt,
dd {
  line-height: var(--mds-line-height-normal);
}

/*
 Code.
*/

code,
pre {
  font-family: var(--mds-font-mono);
  border-radius: var(--mds-border-radius);
  font-size: inherit;
}

/*
 Use <pre> for multiple lines of code.
 Be sure to escape any angle brackets in the code for proper rendering.
*/

pre {
  display: block;
  padding: var(--mds-spacing-2x-small);
  margin: 0 0 var(--mds-spacing-medium);
  line-height: var(--mds-line-height-normal);
  word-break: break-word;
  white-space: pre-wrap;
  background: var(--mds-color-gray-900);
  color: var(--mds-color-white);
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}

/* Wrap inline snippets of code with <code>. */

p > code,
li > code,
dd > code,
td > code {
  background: var(--mds-color-info-100);
  word-wrap: break-word;
  padding: var(--mds-spacing-2x-small) var(--mds-spacing-x-small);
  white-space: nowrap;
}

/* Details element. */

details {
  border-top: var(--mds-border-thin-light);
  border-bottom: var(--mds-border-thin-light);
  border-right: 0;
  border-left: 0;
  padding: var(--mds-spacing-x-small);
}

/* Add top margin when .mds-details follows a heading (h1, h2, h3) */

h1 + details,
h2 + details,
h3 + details {
  margin-top: var(--mds-spacing-large);
}

/* Divider style usually used on hr elements. */

.mds-divider {
  --hr-margin-y: 0;
  --hr-border-style: var(--mds-border-thin-light);
}

/*
  Text modifiers.
  */

/* Muted text - most likely gray text. */

.mds-copy--muted {
  color: var(--mds-color-gray-400);
}

.mds-dark .mds-copy--muted {
  --muted-color: var(--mds-color-gray-300);
}

/* Lead text - Make a paragraph stand out. */

.mds-copy--lead {
  font-size: var(--mds-font-size-large);
  color: var(--text-color, var(--mds-color-gray-500));
  @container style(--mds-theme: dark) {
    --text-color: var(--mds-color-gray-200);
  }
}

/* Smallest standard type size. */

small,
.mds-copy--micro {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-font-size-small);
  line-height: var(--mds-line-height-dense);
}

/* Presentation styles. */

.mds-presentation--stats {
  margin: unset;
  display: block;
  font-size: var(--mds-font-size-xxx-large);
  font-family: var(--mds-font-serif);
  letter-spacing: -0.025em;
  text-align: center;
}

/* Caption for presentation text. */

.mds-presentation--caption {
  margin: unset;
  font-size: var(--mds-font-size-medium);
  font-family: var(--mds-font-sans-medium);
  text-align: center;
}

/* Captions below have additional margin to mirror how a top caption displays. */

.mds-presentation--stats + .mds-presentation--caption {
  margin-top: var(--mds-spacing-2x-small);
}

.mds-presentation--container {
  padding-top: var(--mds-spacing-large);
  padding-bottom: var(--mds-spacing-x-large);
  border-top: 1px dashed var(--mds-color-black);
  border-bottom: 1px dashed var(--mds-color-black);
  clear: both;
}

/* All Inputs, textarea and select styles. */

input,
textarea,
select {
  --padding-y: var(--mds-spacing-x-small);
  --padding-x-left: var(--mds-spacing-x-small);
  --padding-x-right: var(--mds-spacing-x-small);
  --input-font: inherit;
  --color-background: var(--mds-color-white);
  --color-text: var(--mds-color-black);
  --input-border: var(--mds-border-thin);
  --focus: 2px var(--mds-color-black);
  background-color: var(--color-background);
  border: var(--input-border);
  box-sizing: border-box;
  color: var(--color-text, var(--mds-color-black));
  /* Inherit theme font styling. */
  font-family: var(--input-font);
  margin: 0;
  font-size: max(var(--mds-font-sans-medium), 1em);
  transition: box-shadow 0.2s, var(--mds-transition-medium);
  outline: none;
  padding: var(--padding-y) var(--padding-x-right) var(--padding-y) var(--padding-x-left);
}

/* Hover styles. */

input:hover,
textarea:hover,
select:hover {
  box-shadow: 0 0 0 var(--focus);
}

/* Form element */

form {
  --form-margin-bottom: var(--mds-spacing-small);
}

/* Labels. */

/* Centers elements within Labels such as the preferred <input> tag. */

label {
  align-items: center;
  -moz-column-gap: var(--mds-spacing-x-small);
       column-gap: var(--mds-spacing-x-small);
  display: flex;
  font-family: var(--mds-font-sans);
  margin-bottom: var(--mds-spacing-small);
}

/* Disabled label styling when there are nested disabled inputs. */

label:has(> input[disabled], > input:disabled) {
  color: var(--mds-color-gray-400);
}

/* Fieldset styling. */

fieldset {
  --form-margin-bottom: var(--mds-spacing-small);
  border: var(--border-style, var(--mds-border-thin));
  display: block;
  padding: var(--mds-spacing-medium) var(--mds-spacing-large) var(--mds-spacing-large);
  margin-bottom: var(--form-margin-bottom, var(--mds-spacing-small));
}

/* Legend styling. Displays similar to H5 heading. */

legend {
  font-family: var(--mds-font-sans);
  font-size: var(--mds-font-size-medium);
  line-height: var(--mds-line-height-normal);
  padding: var(--mds-spacing-x-small) var(--mds-spacing-2x-small);
}

/*
  Disabled inputs.
*/

input[disabled],
:disabled {
  --input-border: var(--mds-color-gray-300);
  --color-background: var(--mds-color-gray-200);
  --color-text: var(--mds-color-gray-400);
  border: var(--mds-border-thin-light);
  cursor: not-allowed;
}

/* Required fields. */

:required {
  /*
  Field styling stays the same however,
  required fields are indicated with a '*' beside the label.
  */
}

/*
  Focus
  Utilize browser styling to maintain accessibility.
  */

:focus {
  /* Displays as outline. */
  box-shadow: 0 0 0 var(--focus);
}

/* Removes state feedback. */

:disabled:hover {
  box-shadow: none;
  cursor: not-allowed;
}

/* Read only. */

.input[readonly] {
  border-style: dotted;
  cursor: not-allowed;
  color: var(--mds-color-gray-400);
}

/* File type spacing adjustments to align visually with other inputs. */

input[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
}

/* Submit styling. */

input[type="submit"] {
  --color-text: var(--mds-color-white);
  --color-background: var(--mds-color-black);
  --color-border: var(--mds-color-black);
  --input-border: var(--mds-border-medium);
  --input-font: var(--mds-font-sans-medium);
  border-radius: var(--mds-border-radius);
  display: inline-flex;
  padding: var(--mds-spacing-x-small) var(--mds-spacing-medium);
  cursor: pointer;
}

input[type="submit"]:hover {
  --color-text: var(--mds-color-black);
  --color-background: var(--mds-color-white);
  --color-border: var(--mds-color-black);
  box-shadow: none;
  text-decoration: none;
}

/* Reset input styling. */

input[type="reset"] {
  /* Uses the same styling as the .mds-button */
}

/*
  Checkbox and Radio inputs.
  - The input selector is used as the container which displays a background.
  - ::after pseudo element is used as the indicator or button.
*/

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  /*
  Base styling for checkbox and radio buttons
  input element used as a container.
  */

  input[type="checkbox"],
  input[type="radio"] {
    --knob-size: 14px;
    --border-width: 2px;
    --input-size: calc(var(--knob-size) + var(--border-width));
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    height: var(--input-size);
    width: var(--input-size);
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
  }

  /* ::after pseudo element provides an indicator.  */

  input[type="checkbox"]::after,
  input[type="radio"]::after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transform: scale(var(--s, 0.7));
    opacity: var(--o, 0%);
  }

  /*
    Radio buttons.
  */

  /* Radio specific ui. */

  input[type="radio"] {
    border-radius: 50%;
  }

  /* Round ::after pseudo radio element. */

  input[type="radio"]::after {
    width: var(--knob-size);
    height: var(--knob-size);
    background: var(--mds-color-black);
    border-radius: 50%;
  }

  /* Radio focus and checked state. */

  input[type="radio"]:checked,
  input[type="radio"]:focus {
    --o: 1;
    --s: 0.8;
    --color-background: var(--mds-color-white);
  }

  /*
    Creates a faux checkbox by adding a rotated outline rectangle
    with two borders removed.
  */

  input[type="checkbox"]::after {
    width: 6px;
    height: 9px;
    border: var(--border-width) solid var(--mds-color-black);
    border-top: 0;
    border-left: 0;
    left: 4px;
    top: 1px;
    transform: rotate(var(--r, 20deg));
  }

  /* Checked checkbox */

  input[type="checkbox"]:checked {
    --color-background: var(--mds-color-white);
    --r: 43deg;
    --o: 1;
  }

  /*
  Toggle switch Input used on checkboxes.
  */

  input[type="checkbox"].mds-switch {
    --switch-width: calc(var(--knob-size) * 2);
    --switch-height: calc(var(--input-size) + var(--border-width));
    --switch-radius: var(--knob-size);
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: var(--switch-radius);
  }

  /* ::after element applies the knob. */

  input[type="checkbox"].mds-switch::after {
    --o: 1;
    left: 1px;
    top: 1px;
    border-radius: 50%;
    border: none;
    width: var(--knob-size);
    height: var(--knob-size);
    transform: translateX(var(--x, 0));
    background: var(--ab, var(--mds-color-black));
  }

  /* Toggle checked. */

  input[type="checkbox"].mds-switch:checked {
    --ab: var(--mds-color-white);
    --x: 10px;
    --color-background: var(--mds-color-black);
  }

  /* Drop the opacity of the toggle knob when the input is disabled */

  input[type="checkbox"].mds-switch:disabled:not(:checked)::after {
    opacity: 60%;
  }
}

/*
 McGill-ds form input classes.
 */

/* Input help text description. */

.mds-form-item--hint {
  color: var(--mds-color-gray-400);
  font-size: var(--mds-font-size-small);
  margin-top: var(--mds-spacing-2x-small);
  margin-bottom: 0;
}

/*
  Error messages
*/

/* Error icon. Displays error icon in the field */

/* TODO: Automatically apply error styling to the related input field
   if error message displays, instead of needing to add a class to the input field. */

input[type="text"].mds-form-item--error,
input[type="email"].mds-form-item--error,
input[type="file"].mds-form-item--error {
  --input-border: var(--mds-border-error);
  --padding-x-right: var(--mds-spacing-large);
  background-image: var(--mds-icon-error-colored);
  background-position: 98% 50%;
  background-repeat: no-repeat;
}

/* Error message description. */

.mds-form-item--error-message {
  color: var(--mds-color-error-500);
}

/* Required fields. To be used on form labels. */

.mds-label--required::after {
  content: " *";
  color: var(--mds-color-error-500);
}

/* Wrapper to help with spacing between form elements. */

/*
  TODO: Make '.mds-form-item' more generic since we can use this