@mcgill-wsg/mcgill-ds/dist/css/mds-scoped.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 .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 .mds-my--small {
  margin-top: var(--mds-spacing-small);
  margin-bottom: var(--mds-spacing-small);
}

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

/* Top margin */

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

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

/* Bottom margin */

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

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

/* Right margin */

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

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

/* Left margin */

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

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

/*
 Type utilities.
 */

/* Alignment */

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

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

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

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

/* Size */

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

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

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

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

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

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

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

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

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

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

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

/*
 List utilities.
 */

.mds .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 .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 .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 .mds-visually-hidden.focusable:active,
.mds .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 .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-' */

.mds div[class*="mds-l-grid-"],
.mds 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 .mds-l-grid--cols-2 {
  --col-number: 2;
}

.mds .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 .mds-l-grid--desktop-3 {
    --col-number: 3;
  }

  .mds .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 .mds-l-box--small {
  padding: var(--mds-spacing-medium);
}

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

/* Flex. */

.mds [class*="mds-l-flex"],
.mds [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 .mds-l-flex-col {
  --direction: column;
}

.mds .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 .mds-l-flex-col {
    --justify: start;
  }

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

/*
 Flex utilities.
 */

/* Align - top to bottom */

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

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

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

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

/* Justify - right to left */

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

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

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

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

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

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

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

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

.mds .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 .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 .mds-dark a {
  --link-color: var(--mds-color-white);
}

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

/*
 Button styling.
 */

.mds .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 .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 .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 .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 .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 .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 .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 .mds-dark :is(input[disabled], :disabled) {
  --color-background: var(--mds-color-gray-500);
}

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

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

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

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

/* Checkbox and radio button. */

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

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

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

.mds .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 .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 .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);
  }

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

  .mds :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 :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 .mds-button.mds-button--secondary {
    --color-background: var(--mds-color-white);
    --color-border: var(--mds-color-white);
    --color-text: var(--mds-color-black);
  }

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

  /* Branded button. */

  .mds .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 .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 :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 :is(input[disabled], :disabled) {
    --color-background: var(--mds-color-gray-500);
  }

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

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

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

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

  /* Checkbox and radio button. */

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

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

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

  .mds 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 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 .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.
 */

.mds main {
  display: block;
}

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

.mds 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.
 */

.mds 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.
 */

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

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

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

.mds 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.
 */

.mds 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.
 */

.mds b,
.mds 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.
 */

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

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

.mds small {
  font-size: 80%;
}

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

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

.mds sub {
  bottom: -0.25em;
}

.mds sup {
  top: -0.5em;
}

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

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

.mds img {
  border-style: none;
}

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

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

.mds button,
.mds input,
.mds optgroup,
.mds select,
.mds 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.
 */

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

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

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

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

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

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

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

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

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

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

.mds 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.
 */

.mds 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.
 */

.mds progress {
  vertical-align: baseline;
}

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

.mds textarea {
  overflow: auto;
}

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

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

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

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

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

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

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

.mds [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.
 */

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

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

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

.mds details {
  display: block;
}

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

.mds summary {
  display: list-item;
}

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

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

.mds template {
  display: none;
}

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

.mds [hidden] {
  display: none;
}

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

.mds .visible {
  visibility: visible;
}

.mds .invisible {
  visibility: hidden;
}

.mds .relative {
  position: relative;
}

.mds .block {
  display: block;
}

.mds .inline {
  display: inline;
}

.mds .flex {
  display: flex;
}

.mds .table {
  display: table;
}

.mds .grid {
  display: grid;
}

.mds .contents {
  display: contents;
}

.mds .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);
  }
}

.mds .border {
  border-width: 1px;
}

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

.mds .italic {
  font-style: italic;
}

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

.mds *, .mds ::before, .mds ::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;
}

.mds .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;
}

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

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

/* Removes margin on elements. */

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

/* Default font-weight. */

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

/* Vertically align elements. */

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

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

.mds fieldset {
  margin: 0;
  padding: 0;
}

/* Details element. */

.mds details summary {
  cursor: pointer;
}

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

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

/**
  Typography.
*/

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

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

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

.mds h4,
.mds .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));
}

.mds h5,
.mds .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));
}

.mds :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. */

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

/* Spacing between different heading elements. */

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

/* Spacing between the heading elements. */

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

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

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

/* Body font. */

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

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

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

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

/* Standard italics. */

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

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

/*
 Header variations.
 */

/* Serif italic. */

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

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

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

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

/* Sans italic. */

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

.mds 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. */

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

/* Contact information. */

.mds 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
 */

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

/*
  Lists.
  */

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

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

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

/* Paragraph styling. */

.mds 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. */

.mds blockquote,
.mds blockquote > p,
.mds .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);
}

.mds 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. */

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

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

.mds p ul {
  list-style: disc;
}

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

.mds 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.
*/

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

.mds dt {
  font-weight: bold;
}

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

/*
 Code.
*/

.mds code,
.mds 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.
*/

.mds 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>. */

.mds p > code,
.mds li > code,
.mds dd > code,
.mds 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. */

.mds 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) */

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

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

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

/*
  Text modifiers.
  */

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

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

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

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

.mds .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. */

.mds small,
.mds .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 .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 .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 .mds-presentation--stats + .mds-presentation--caption {
  margin-top: var(--mds-spacing-2x-small);
}

.mds .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. */

.mds input,
.mds textarea,
.mds 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. */

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

/* Form element */

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

/* Labels. */

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

.mds 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. */

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

/* Fieldset styling. */

.mds 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. */

.mds 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.
*/

.mds input[disabled],
.mds :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. */

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

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

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

/* Removes state feedback. */

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

/* Read only. */

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

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

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

/* Submit styling. */

.mds 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;
}

.mds 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. */

.mds 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.
  */

  .mds input[type="checkbox"],
  .mds 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.  */

  .mds input[type="checkbox"]::after,
  .mds 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. */

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

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

  .mds 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. */

  .mds input[type="radio"]:checked,
  .mds 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.
  */

  .mds 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 */

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

  /*
  Toggle switch Input used on checkboxes.
  */

  .mds 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. */

  .mds 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));
    backgrou