/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

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

/**
Use a better box model (opinionated).
*/

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

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	-moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
	tab-size: 4; /* 3 */
}

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

body {
	margin: 0; /* Remove the margin in all browsers. */
}

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

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

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

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

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

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		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;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
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 */
}

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

button,
select {
	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.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

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

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

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

progress {
	vertical-align: baseline;
}

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

::-webkit-inner-spin-button,
::-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.
*/

::-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 Chrome and Safari.
*/

summary {
	display: list-item;
}

:root {
  --dmd-border-width: 1px;
  --dmd-border-style: solid;
  --dmd-border: var(--dmd-border-width) var(--dmd-border-style)
    var(--dmd-theme-border-color);
}

:root {
  --dmd-button-border-radius: var(--dmd-radius);
  --dmd-button-text-shadow: none;
  --dmd-button-file-background: var(--dmd-color-grey-100);
  --dmd-button-padding-inline: var(--dmd-spacing);
  --dmd-button-padding-block: var(--dmd-spacing-sm);
  --dmd-button-gap: 0.75ch;
  --dmd-button-outline-offset: 4px;
  --dmd-button-font-weight: var(--dmd-font-weight-base);
  --dmd-button-line-height: var(--dmd-font-line-height);

  /* Default variant */
  --dmd-button-background: var(--dmd-theme-background);
  --dmd-button-background-hover: var(--dmd-theme-background);
  --dmd-button-background-disabled: var(--dmd-theme-background);
  --dmd-button-border-color: var(--dmd-theme-border-color);
  --dmd-button-border-color-hover: var(--dmd-theme-color);
  --dmd-button-border-color-disabled: var(--dmd-theme-border-color);
  --dmd-button-color: var(--dmd-theme-color);
  --dmd-button-color-hover: var(--dmd-theme-color);
  --dmd-button-color-disabled: var(--dmd-theme-color-muted);

  /* Primary variant */
  --dmd-button-primary-background: var(--dmd-color-grey-800);
  --dmd-button-primary-background-hover: var(--dmd-color-grey-900);
  --dmd-button-primary-background-disabled: var(--dmd-color-grey-600);
  --dmd-button-primary-border-color: var(--dmd-button-primary-background);
  --dmd-button-primary-border-color-hover: var(
    --dmd-button-primary-background-hover
  );
  --dmd-button-primary-border-color-disabled: var(
    --dmd-button-primary-background-disabled
  );
  --dmd-button-primary-color: var(--dmd-theme-background);
  --dmd-button-primary-color-hover: var(--dmd-theme-background);
  --dmd-button-primary-color-disabled: var(--dmd-theme-background);

  /* Secondary variant */
  --dmd-button-secondary-background: var(--dmd-theme-background-muted);
  --dmd-button-secondary-background-hover: var(--dmd-theme-background-muted);
  --dmd-button-secondary-background-disabled: var(--dmd-theme-background-muted);
  --dmd-button-secondary-border-color: var(--dmd-theme-background-muted);
  --dmd-button-secondary-border-color-hover: var(--dmd-theme-color);
  --dmd-button-secondary-border-color-disabled: var(
    --dmd-theme-background-muted
  );
  --dmd-button-secondary-color: var(--dmd-theme-color);
  --dmd-button-secondary-color-hover: var(--dmd-theme-color);
  --dmd-button-secondary-color-disabled: var(--dmd-theme-color-muted);

  /* Text variant */
  --dmd-button-text-background: none;
  --dmd-button-text-background-hover: var(--dmd-color-grey-100);
  --dmd-button-text-background-disabled: none;
  --dmd-button-text-border-color: transparent;
  --dmd-button-text-border-color-hover: transparent;
  --dmd-button-text-border-color-disabled: transparent;
  --dmd-button-text-color: var(--dmd-theme-color);
  --dmd-button-text-color-hover: var(--dmd-theme-color);
  --dmd-button-text-color-disabled: var(--dmd-theme-color-muted);
}

:root,
::backdrop {
  --dmd-color-white: #fff;

  --dmd-color-grey-50: #f2f2f2;
  --dmd-color-grey-100: #e6e6e6;
  --dmd-color-grey-200: #ccc;
  --dmd-color-grey-300: #b3b3b3;
  --dmd-color-grey-400: #999;
  --dmd-color-grey-500: #808080;
  --dmd-color-grey-600: #666;
  --dmd-color-grey-700: #4d4d4d;
  --dmd-color-grey-800: #333;
  --dmd-color-grey-900: #1a1a1a;

  --dmd-color-black: #000;

  --dmd-color-green-100: #219653;

  --dmd-color-red-100: #eb5757;

  --dmd-color-valid: var(--dmd-color-green-100);
  --dmd-color-invalid: var(--dmd-color-red-100);
}

:root {
  --dmd-font-family: -apple-system, system-ui, blinkmacsystemfont, roboto,
    helvetica, arial, sans-serif;
  --dmd-font-family-heading: var(--dmd-font-family);

  --dmd-font-line-height: 1.5;
  --dmd-font-line-height-sm: 1.25;
  --dmd-font-line-height-heading: var(--dmd-font-line-height-sm);

  --dmd-font-size-default: 1rem;
  --dmd-font-size-xs: 0.75em;
  --dmd-font-size-sm: 0.875em;
  --dmd-font-size-base: 0.875rem;
  --dmd-font-size-md: 1.125em;
  --dmd-font-size-lg: 1.25em;
  --dmd-font-size-xl: 1.5em;
  --dmd-font-size-xxl: 2em;
  --dmd-font-size-xxxl: 3em;

  --dmd-font-size-h1: 2rem;
  --dmd-font-size-h2: 1.75rem;
  --dmd-font-size-h3: 1.5rem;
  --dmd-font-size-h4: 1.25rem;

  --dmd-icon-size: calc(1em * var(--dmd-font-line-height));

  --dmd-font-weight-light: 300;
  --dmd-font-weight-base: 400;
  --dmd-font-weight-medium: 500;
  --dmd-font-weight-bold: 700;
  --dmd-font-weight-black: 900;
}

@media (width >= 768px) {
  :root {
    --dmd-font-size-base: 1rem;

    --dmd-font-size-h1: 3rem;
    --dmd-font-size-h2: 2rem;
  }
}

:root {
  /* The size of icons compared to the text */
  --dmd-icon-size: 1.25em;
  /*
    Adjust the icon to sit nicely next to text,
    probably needs changing per font
  */
  --dmd-icon-baseline-adjust: 0.25em;
}

:root {
  --dmd-input-background: var(--dmd-theme-background);
  --dmd-input-background-focus: var(--dmd-theme-background);
  --dmd-input-background-disabled: var(--dmd-theme-background-muted);

  --dmd-input-border-width: 1px;
  --dmd-input-border-radius: var(--dmd-radius);
  --dmd-input-border-color: var(--dmd-theme-border-color);
  --dmd-input-border-color-hover: var(--dmd-theme-border-color-hover);
  --dmd-input-border-color-valid: var(--dmd-color-valid);
  --dmd-input-border-color-invalid: var(--dmd-color-invalid);

  --dmd-input-outline-offset: 4px;

  --dmd-input-color: var(--dmd-theme-color);

  --dmd-input-checked: var(--dmd-color-black);
  --dmd-input-checkbox-border-radius: var(--dmd-radius-sm);
  --dmd-input-radio-checkbox-padding: 0.1875rem;

  --dmd-input-padding-block: var(--dmd-spacing-sm);
  --dmd-input-padding-inline: var(--dmd-spacing);
  --dmd-input-padding: var(--dmd-input-padding-block)
    var(--dmd-input-padding-inline);

  --dmd-input-line-height: var(--dmd-font-line-height);

  /* Should be 16px minimum to avoid IOS zoom */
  --dmd-input-font-size: var(--dmd-font-size-default);
}

:root {
  --dmd-label-color: var(--dmd-theme-color);
  --dmd-label-font-weight: var(--dmd-font-weight-base);
  --dmd-label-font-size: var(--dmd-font-size-base);
  --dmd-label-height: var(--dmd-spacing-thumb);

  --dmd-help-text-color: var(--dmd-theme-color);
  --dmd-help-text-color-valid: var(--dmd-color-valid);
  --dmd-help-text-color-invalid: var(--dmd-color-invalid);
  --dmd-help-text-font-size: var(--dmd-font-size-sm);
}

:root {
  --dmd-loading-delay: 0.5s;
}

:root {
  --dmd-radius-xs: 0.125rem;
  --dmd-radius-sm: 0.25rem;
  --dmd-radius: 0.5rem;
  --dmd-radius-lg: 1rem;
}

:root {
  --dmd-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

:root {
  --dmd-spacing-thumb: 2.625rem;

  --dmd-spacing-md: 1rem;
  --dmd-spacing: var(--dmd-spacing-md);
  --dmd-spacing-xs: calc(var(--dmd-spacing) / 4);
  --dmd-spacing-sm: calc(var(--dmd-spacing) / 2);
  --dmd-spacing-lg: calc(var(--dmd-spacing) * 2);
  --dmd-spacing-xl: calc(var(--dmd-spacing) * 4);

  --dmd-spacing-fluid: clamp(1rem, 5vw, 4rem);
  --dmd-spacing-fluid-sm: clamp(1rem, 2.5vw, 3rem);
  --dmd-spacing-fluid-lg: clamp(1rem, 7.5vw, 5rem);
}

:root {
  --dmd-theme-background: var(--dmd-color-white);
  --dmd-theme-background-muted: var(--dmd-color-grey-100);

  --dmd-theme-border-color: var(--dmd-color-grey-200);
  --dmd-theme-border-color-hover: #1a0dab;

  --dmd-theme-color: var(--dmd-color-grey-900);
  --dmd-theme-color-muted: var(--dmd-color-grey-700);

  --dmd-theme-heading-color: var(--dmd-theme-color);

  --dmd-theme-icon-color: var(--dmd-theme-color);

  --dmd-theme-link-color: #1a0dab;

  --dmd-theme-link-text-decoration: underline;
}

:root,
::backdrop {
  --dmd-transition-duration: 0.2s;
  --dmd-transition-timing: ease-in-out;
  --dmd-transition: var(--dmd-transition-duration) var(--dmd-transition-timing);

  --dmd-transition-duration-boing: 0.3s;
  --dmd-transition-timing-boing: linear(
    0,
    0.06,
    0.25 18%,
    1 36%,
    0.81,
    0.75,
    0.81,
    1,
    0.94,
    1,
    1
  );
  --dmd-transition-boing: var(--dmd-transition-duration-boing)
    var(--dmd-transition-timing-boing);

  --dmd-transition-duration-pulse: 2.4s;
  --dmd-transition-timing-pulse: ease-in-out;

  --dmd-transition-duration-enter: 0.5s;
  --dmd-transition-timing-enter: ease-in-out;
  --dmd-transition-enter: var(--dmd-transition-duration-enter)
    var(--dmd-transition-timing-enter);
}

@media (prefers-reduced-motion) {
  :root {
    --dmd-transition-duration: 0s;
    --dmd-transition-duration-enter: 0s;
    --dmd-transition-duration-boing: 0s;
    --dmd-transition-duration-pulse: 0s;
  }
}

:root {
  --dmd-wrap-xs: 320px;
  --dmd-wrap-sm: 480px;
  --dmd-wrap-md: 600px;
  --dmd-wrap-lg: 768px;
  --dmd-wrap-xl: 1024px;
  --dmd-wrap-xxl: 1280px;
  --dmd-wrap-xxxl: 1440px;
  --dmd-wrap-xxxxl: 1920px;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* Firefox */

/* stylelint-disable-next-line selector-no-qualifying-type */

input[type='number'] {
  appearance: textfield;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--dmd-theme-background);
  color: var(--dmd-theme-color);
  margin: 0;
  padding: 0;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

hr {
  border: 0 none;
  border-bottom: 1px solid var(--dmd-theme-border-color);
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--dmd-font-family);
  font-size: var(--dmd-font-size-base);
  -webkit-font-smoothing: antialiased;
  line-height: var(--dmd-font-line-height);
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  color: var(--dmd-theme-heading-color);
  font-weight: var(--dmd-font-weight-bold);
  line-height: var(--dmd-font-line-height-heading);
  margin-bottom: var(--dmd-spacing-sm);
  margin-top: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--dmd-font-size-h1);
}

h2 {
  font-size: var(--dmd-font-size-h2);
}

h3 {
  font-size: var(--dmd-font-size-h3);
}

h4 {
  font-size: var(--dmd-font-size-h4);
}

p {
  margin-bottom: var(--dmd-spacing-sm);
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 var(--dmd-spacing-sm) var(--dmd-spacing-xs);
  padding-left: var(--dmd-spacing);
}

ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

dl {
  margin: 0 0 var(--dmd-spacing-sm);
}

dt,
dd {
  margin: 0;
  padding: 0;
}

a {
  color: var(--dmd-theme-link-color);
  text-decoration: var(--dmd-theme-link-text-decoration);
}

b,
strong {
  font-weight: var(--dmd-font-weight-bold);
}

a,
button,
label {
  &:has(dmd-card, [data-interactive]) {
    appearance: none;
    background-color: transparent;
    border: 0 none;
    cursor: pointer;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    text-align: inherit;
    text-decoration: none;
  }
}

.dmd-sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* stylelint-disable-next-line at-rule-no-unknown, scss/at-rule-no-unknown */

dmd-card {
  background: var(--dmd-theme-background);
  border: 0 none;
  color: var(--dmd-theme-color);
  display: block;
  padding: var(--dmd-spacing);
  transition: border-color var(--dmd-transition);

  &[shadow] {
    box-shadow: var(--dmd-shadow);
  }

  &[muted] {
    background: var(--dmd-theme-background-muted);
  }

  &[radius] {
    border-radius: var(--dmd-radius);
    overflow: hidden;
  }

  &[padding='xs'] {
    padding: var(--dmd-spacing-xs);
  }

  &[padding='sm'] {
    padding: var(--dmd-spacing-sm);
  }

  &[padding='lg'] {
    padding: var(--dmd-spacing-lg);
  }

  &[padding='xl'] {
    padding: var(--dmd-spacing-xl);
  }

  &[padding='fluid-sm'] {
    padding: var(--dmd-spacing-fluid-sm);
  }

  &[padding='fluid'] {
    padding: var(--dmd-spacing-fluid);
  }

  &[padding='fluid-lg'] {
    padding: var(--dmd-spacing-fluid-lg);
  }

  &[padding='none'] {
    padding: 0;
  }

  &[border] {
    border: 1px solid var(--dmd-theme-border-color);
  }

  @media (hover: hover) {
    &[border][href]:hover {
      border-color: var(--dmd-theme-border-color-hover);
    }
  }
}

button,
a {
  &:hover,
  &:focus-visible {
    dmd-card {
      border-color: var(--dmd-theme-border-color-hover);
    }
  }
}

dmd-section {
  background: var(--dmd-theme-background);
  color: var(--dmd-theme-color);
  display: block;
  padding-block: var(--dmd-spacing);

  &[padding='xs'] {
    padding-block: var(--dmd-spacing-xs);
  }

  &[padding='sm'] {
    padding-block: var(--dmd-spacing-sm);
  }

  &[padding='lg'] {
    padding-block: var(--dmd-spacing-lg);
  }

  &[padding='xl'] {
    padding-block: var(--dmd-spacing-xl);
  }

  &[padding='fluid-sm'] {
    padding-block: var(--dmd-spacing-fluid-sm);
  }

  &[padding='fluid'] {
    padding-block: var(--dmd-spacing-fluid);
  }

  &[padding='fluid-lg'] {
    padding-block: var(--dmd-spacing-fluid-lg);
  }

  &[padding='none'] {
    padding-block: 0;
  }
}

dmd-app {
  display: grid;
  grid-template-areas: 'header' 'main' 'footer';
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;

  &::part(header) {
    grid-area: header;
  }

  &::part(main) {
    grid-area: main;
  }

  &::part(footer) {
    grid-area: footer;
  }

  &[header='sticky'] {
    &::part(header) {
      position: sticky;
      top: 0;
      z-index: 1;
    }
  }
}

dialog {
  background: none;
  border: 0 none;
  opacity: 0;
  padding: 0;
  transform: translateY(1rem);
  transition:
    opacity var(--dmd-transition),
    display var(--dmd-transition) allow-discrete,
    overlay var(--dmd-transition) allow-discrete,
    transform var(--dmd-transition);

  &::backdrop {
    background-color: var(--dmd-backdrop, var(--dmd-color-grey-600));
    opacity: 0;
    transition:
      opacity var(--dmd-transition),
      display var(--dmd-transition) allow-discrete,
      overlay var(--dmd-transition) allow-discrete;
  }

  &[open] {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--dmd-transition-duration) * 0.5);
  }

  &[open]::backdrop {
    opacity: var(--dmd-backdrop-opacity, 0.4);
  }
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(1rem);
  }

  dialog[open]::backdrop {
    opacity: 0;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate(0, 1rem);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes boing {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

dmd-enter {
  animation-duration: var(--dmd-transition-duration-enter);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: var(--dmd-transition-enter-animation);
  animation-timing-function: var(--dmd-transition-timing-enter);
  display: block;
  opacity: 0;

  &[delay] {
    animation-delay: var(--dmd-transition-enter-delay);
  }

  &[type='boing'] {
    animation-timing-function: var(--dmd-transition-timing-boing);
  }

  &[fill] {
    display: grid;
  }
}

dmd-form-group {
  align-items: baseline;
  display: grid;
  gap: var(--dmd-spacing-sm);

  label:not(dmd-radio-checkbox label) {
    /* Negate the extra label height to account for the form group gap */
    margin-block: calc(
      (var(--dmd-label-height) / var(--dmd-font-line-height) / 4) * -1
    );
  }

  @media (width >= 768px) {
    &[orientation='horizontal'] {
      grid-template-columns: 1fr 1fr;

      :not(:first-child) {
        grid-column: 2;
      }
    }
  }
}

dmd-grid {
  --dmd-grid-gap: var(--dmd-spacing);
  display: flex;
  margin: calc(var(--dmd-grid-gap) * -0.5);

  &[inline] {
    display: inline-flex;
  }

  /* wrap */

  &[wrap='wrap'] {
    flex-wrap: wrap;
  }

  &[wrap='wrap-reverse'] {
    flex-wrap: wrap-reverse;
  }

  &[direction='row'] {
    flex-direction: row;
  }

  /* direction */

  &[direction='row-reverse'] {
    flex-direction: row-reverse;
  }

  &[direction='column'] {
    flex-direction: column;
  }

  &[direction='column-reverse'] {
    flex-direction: column-reverse;
  }

  /* justify-content */

  &[justify-content='flex-start'] {
    justify-content: flex-start;
  }

  &[justify-content='flex-end'] {
    justify-content: flex-end;
  }

  &[justify-content='center'] {
    justify-content: center;
  }

  &[justify-content='space-between'] {
    justify-content: space-between;
  }

  &[justify-content='space-around'] {
    justify-content: space-around;
  }

  &[justify-content='space-evenly'] {
    justify-content: space-evenly;
  }

  /* align-items */

  &[align-items='flex-start'] {
    align-items: flex-start;
  }

  &[align-items='flex-end'] {
    align-items: flex-end;
  }

  &[align-items='center'] {
    align-items: center;
  }

  &[align-items='baseline'] {
    align-items: baseline;
  }

  /* gap */

  &[gap='none'] {
    --dmd-grid-gap: 0;
  }

  &[gap='xs'] {
    --dmd-grid-gap: var(--dmd-spacing-xs);
  }

  &[gap='sm'] {
    --dmd-grid-gap: var(--dmd-spacing-sm);
  }

  &[gap='md'] {
    --dmd-grid-gap: var(--dmd-spacing);
  }

  &[gap='lg'] {
    --dmd-grid-gap: var(--dmd-spacing-lg);
  }

  &[gap='xl'] {
    --dmd-grid-gap: var(--dmd-spacing-xl);
  }
}

/*
  Prettier tried to put everything on new lines, but we don't want that in this file.
  Can't see how to disable just that rule.
*/

/* stylelint-disable prettier/prettier */

dmd-grid-item {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  padding: calc(var(--dmd-grid-gap) / 2);

  &[grow] {
    flex-grow: 1;
  }

  &[shrink] {
    flex-shrink: 1;
  }

  &[fill] {
    display: grid;
  }

  /*
    The conversion of attribute value to css variable can be removed once
    attr type-or-unit is supported https://caniuse.com/mdn-css_types_attr_type-or-unit
  */
  &[small-mobile='1'] { --dmd-small-mobile-cols: 1; }
  &[small-mobile='2'] { --dmd-small-mobile-cols: 2; }
  &[small-mobile='3'] { --dmd-small-mobile-cols: 3; }
  &[small-mobile='4'] { --dmd-small-mobile-cols: 4; }
  &[small-mobile='5'] { --dmd-small-mobile-cols: 5; }
  &[small-mobile='6'] { --dmd-small-mobile-cols: 6; }
  &[small-mobile='7'] { --dmd-small-mobile-cols: 7; }
  &[small-mobile='8'] { --dmd-small-mobile-cols: 8; }
  &[small-mobile='9'] { --dmd-small-mobile-cols: 9; }
  &[small-mobile='10'] { --dmd-small-mobile-cols: 10; }
  &[small-mobile='11'] { --dmd-small-mobile-cols: 11; }
  &[small-mobile='12'] { --dmd-small-mobile-cols: 12; }

  &[small-mobile] {
    width: calc(var(--dmd-small-mobile-cols) * 100% / 12);
  }

  &[small-mobile='auto'] {
    width: auto;
  }

  @media (width >= 375px) {
    &[mobile='1'] { --dmd-mobile-cols: 1; }
    &[mobile='2'] { --dmd-mobile-cols: 2; }
    &[mobile='3'] { --dmd-mobile-cols: 3; }
    &[mobile='4'] { --dmd-mobile-cols: 4; }
    &[mobile='5'] { --dmd-mobile-cols: 5; }
    &[mobile='6'] { --dmd-mobile-cols: 6; }
    &[mobile='7'] { --dmd-mobile-cols: 7; }
    &[mobile='8'] { --dmd-mobile-cols: 8; }
    &[mobile='9'] { --dmd-mobile-cols: 9; }
    &[mobile='10'] { --dmd-mobile-cols: 10; }
    &[mobile='11'] { --dmd-mobile-cols: 11; }
    &[mobile='12'] { --dmd-mobile-cols: 12; }

    &[mobile] {
      width: calc(var(--dmd-mobile-cols) * 100% / 12);
    }

    &[mobile='auto'] {
      width: auto;
    }
  }

  @media (width >= 480px) {
    &[large-mobile='1'] { --dmd-large-mobile-cols: 1; }
    &[large-mobile='2'] { --dmd-large-mobile-cols: 2; }
    &[large-mobile='3'] { --dmd-large-mobile-cols: 3; }
    &[large-mobile='4'] { --dmd-large-mobile-cols: 4; }
    &[large-mobile='5'] { --dmd-large-mobile-cols: 5; }
    &[large-mobile='6'] { --dmd-large-mobile-cols: 6; }
    &[large-mobile='7'] { --dmd-large-mobile-cols: 7; }
    &[large-mobile='8'] { --dmd-large-mobile-cols: 8; }
    &[large-mobile='9'] { --dmd-large-mobile-cols: 9; }
    &[large-mobile='10'] { --dmd-large-mobile-cols: 10; }
    &[large-mobile='11'] { --dmd-large-mobile-cols: 11; }
    &[large-mobile='12'] { --dmd-large-mobile-cols: 12; }

    &[large-mobile] {
      width: calc(var(--dmd-large-mobile-cols) * 100% / 12);
    }

    &[large-mobile='auto'] {
      width: auto;
    }
  }

  @media (width >= 600px) {
    &[small-tablet='1'] { --dmd-small-tablet-cols: 1; }
    &[small-tablet='2'] { --dmd-small-tablet-cols: 2; }
    &[small-tablet='3'] { --dmd-small-tablet-cols: 3; }
    &[small-tablet='4'] { --dmd-small-tablet-cols: 4; }
    &[small-tablet='5'] { --dmd-small-tablet-cols: 5; }
    &[small-tablet='6'] { --dmd-small-tablet-cols: 6; }
    &[small-tablet='7'] { --dmd-small-tablet-cols: 7; }
    &[small-tablet='8'] { --dmd-small-tablet-cols: 8; }
    &[small-tablet='9'] { --dmd-small-tablet-cols: 9; }
    &[small-tablet='10'] { --dmd-small-tablet-cols: 10; }
    &[small-tablet='11'] { --dmd-small-tablet-cols: 11; }
    &[small-tablet='12'] { --dmd-small-tablet-cols: 12; }

    &[small-tablet] {
      width: calc(var(--dmd-small-tablet-cols) * 100% / 12);
    }

    &[small-tablet='auto'] {
      width: auto;
    }
  }

  @media (width >= 768px) {
    &[tablet='1'] { --dmd-tablet-cols: 1; }
    &[tablet='2'] { --dmd-tablet-cols: 2; }
    &[tablet='3'] { --dmd-tablet-cols: 3; }
    &[tablet='4'] { --dmd-tablet-cols: 4; }
    &[tablet='5'] { --dmd-tablet-cols: 5; }
    &[tablet='6'] { --dmd-tablet-cols: 6; }
    &[tablet='7'] { --dmd-tablet-cols: 7; }
    &[tablet='8'] { --dmd-tablet-cols: 8; }
    &[tablet='9'] { --dmd-tablet-cols: 9; }
    &[tablet='10'] { --dmd-tablet-cols: 10; }
    &[tablet='11'] { --dmd-tablet-cols: 11; }
    &[tablet='12'] { --dmd-tablet-cols: 12; }

    &[tablet] {
      width: calc(var(--dmd-tablet-cols) * 100% / 12);
    }

    &[tablet='auto'] {
      width: auto;
    }
  }

  @media (width >= 1024px) {
    &[large-tablet='1'] { --dmd-large-tablet-cols: 1; }
    &[large-tablet='2'] { --dmd-large-tablet-cols: 2; }
    &[large-tablet='3'] { --dmd-large-tablet-cols: 3; }
    &[large-tablet='4'] { --dmd-large-tablet-cols: 4; }
    &[large-tablet='5'] { --dmd-large-tablet-cols: 5; }
    &[large-tablet='6'] { --dmd-large-tablet-cols: 6; }
    &[large-tablet='7'] { --dmd-large-tablet-cols: 7; }
    &[large-tablet='8'] { --dmd-large-tablet-cols: 8; }
    &[large-tablet='9'] { --dmd-large-tablet-cols: 9; }
    &[large-tablet='10'] { --dmd-large-tablet-cols: 10; }
    &[large-tablet='11'] { --dmd-large-tablet-cols: 11; }
    &[large-tablet='12'] { --dmd-large-tablet-cols: 12; }

    &[large-tablet] {
      width: calc(var(--dmd-large-tablet-cols) * 100% / 12);
    }

    &[large-tablet='auto'] {
      width: auto;
    }
  }

  @media (width >= 1280px) {
    &[small-desktop='1'] { --dmd-small-desktop-cols: 1; }
    &[small-desktop='2'] { --dmd-small-desktop-cols: 2; }
    &[small-desktop='3'] { --dmd-small-desktop-cols: 3; }
    &[small-desktop='4'] { --dmd-small-desktop-cols: 4; }
    &[small-desktop='5'] { --dmd-small-desktop-cols: 5; }
    &[small-desktop='6'] { --dmd-small-desktop-cols: 6; }
    &[small-desktop='7'] { --dmd-small-desktop-cols: 7; }
    &[small-desktop='8'] { --dmd-small-desktop-cols: 8; }
    &[small-desktop='9'] { --dmd-small-desktop-cols: 9; }
    &[small-desktop='10'] { --dmd-small-desktop-cols: 10; }
    &[small-desktop='11'] { --dmd-small-desktop-cols: 11; }
    &[small-desktop='12'] { --dmd-small-desktop-cols: 12; }

    &[small-desktop] {
      width: calc(var(--dmd-small-desktop-cols) * 100% / 12);
    }

    &[small-desktop='auto'] {
      width: auto;
    }
  }

  @media (width >= 1440px) {
    &[desktop='1'] { --dmd-desktop-cols: 1; }
    &[desktop='2'] { --dmd-desktop-cols: 2; }
    &[desktop='3'] { --dmd-desktop-cols: 3; }
    &[desktop='4'] { --dmd-desktop-cols: 4; }
    &[desktop='5'] { --dmd-desktop-cols: 5; }
    &[desktop='6'] { --dmd-desktop-cols: 6; }
    &[desktop='7'] { --dmd-desktop-cols: 7; }
    &[desktop='8'] { --dmd-desktop-cols: 8; }
    &[desktop='9'] { --dmd-desktop-cols: 9; }
    &[desktop='10'] { --dmd-desktop-cols: 10; }
    &[desktop='11'] { --dmd-desktop-cols: 11; }
    &[desktop='12'] { --dmd-desktop-cols: 12; }

    &[desktop] {
      width: calc(var(--dmd-desktop-cols) * 100% / 12);
    }

    &[desktop='auto'] {
      width: auto;
    }
  }

  @media (width >= 1920px) {
    &[large-desktop='1'] { --dmd-large-desktop-cols: 1; }
    &[large-desktop='2'] { --dmd-large-desktop-cols: 2; }
    &[large-desktop='3'] { --dmd-large-desktop-cols: 3; }
    &[large-desktop='4'] { --dmd-large-desktop-cols: 4; }
    &[large-desktop='5'] { --dmd-large-desktop-cols: 5; }
    &[large-desktop='6'] { --dmd-large-desktop-cols: 6; }
    &[large-desktop='7'] { --dmd-large-desktop-cols: 7; }
    &[large-desktop='8'] { --dmd-large-desktop-cols: 8; }
    &[large-desktop='9'] { --dmd-large-desktop-cols: 9; }
    &[large-desktop='10'] { --dmd-large-desktop-cols: 10; }
    &[large-desktop='11'] { --dmd-large-desktop-cols: 11; }
    &[large-desktop='12'] { --dmd-large-desktop-cols: 12; }

    &[large-desktop] {
      width: calc(var(--dmd-large-desktop-cols) * 100% / 12);
    }

    &[large-desktop='auto'] {
      width: auto;
    }
  }
}

.dmd-hidden-small-mobile {
  display: none;
}

.dmd-visible-small-mobile {
  display: block;
}

@media (width >= 375px) {
  .dmd-hidden-mobile {
    display: none;
  }

  .dmd-visible-mobile {
    display: block;
  }
}

@media (width >= 480px) {
  .dmd-hidden-large-mobile {
    display: none;
  }

  .dmd-visible-large-mobile {
    display: block;
  }
}

@media (width >= 600px) {
  .dmd-hidden-small-tablet {
    display: none;
  }

  .dmd-visible-small-tablet {
    display: block;
  }
}

@media (width >= 768px) {
  .dmd-hidden-tablet {
    display: none;
  }

  .dmd-visible-tablet {
    display: block;
  }
}

@media (width >= 1024px) {
  .dmd-hidden-large-tablet {
    display: none;
  }

  .dmd-visible-large-tablet {
    display: block;
  }
}

@media (width >= 1280px) {
  .dmd-hidden-small-desktop {
    display: none;
  }

  .dmd-visible-small-desktop {
    display: block;
  }
}

@media (width >= 1440px) {
  .dmd-hidden-desktop {
    display: none;
  }

  .dmd-visible-desktop {
    display: block;
  }
}

@media (width >= 1920px) {
  .dmd-hidden-large-desktop {
    display: none;
  }

  .dmd-visible-large-desktop {
    display: block;
  }
}

dmd-input-button-group {
  display: flex;

  --dmd-input-border-radius: var(--dmd-radius) 0 0 var(--dmd-radius);
  --dmd-button-border-radius: 0 var(--dmd-radius) var(--dmd-radius) 0;
}

/* top */

.dmd-spacing-top-none {
  margin-top: 0;
}

.dmd-spacing-top-xs {
  margin-top: var(--dmd-spacing-xs);
}

.dmd-spacing-top-sm {
  margin-top: var(--dmd-spacing-sm);
}

.dmd-spacing-top-md {
  margin-top: var(--dmd-spacing);
}

.dmd-spacing-top-lg {
  margin-top: var(--dmd-spacing-lg);
}

.dmd-spacing-top-xl {
  margin-top: var(--dmd-spacing-xl);
}

.dmd-spacing-top-fluid {
  margin-top: var(--dmd-spacing-fluid);
}

.dmd-spacing-top-fluid-sm {
  margin-top: var(--dmd-spacing-fluid-sm);
}

.dmd-spacing-top-fluid-lg {
  margin-top: var(--dmd-spacing-fluid-lg);
}

/* bottom */

.dmd-spacing-bottom-none {
  margin-bottom: 0;
}

.dmd-spacing-bottom-xs {
  margin-bottom: var(--dmd-spacing-xs);
}

.dmd-spacing-bottom-sm {
  margin-bottom: var(--dmd-spacing-sm);
}

.dmd-spacing-bottom-md {
  margin-bottom: var(--dmd-spacing);
}

.dmd-spacing-bottom-lg {
  margin-bottom: var(--dmd-spacing-lg);
}

.dmd-spacing-bottom-xl {
  margin-bottom: var(--dmd-spacing-xl);
}

.dmd-spacing-bottom-fluid {
  margin-bottom: var(--dmd-spacing-fluid);
}

.dmd-spacing-bottom-fluid-sm {
  margin-bottom: var(--dmd-spacing-fluid-sm);
}

.dmd-spacing-bottom-fluid-lg {
  margin-bottom: var(--dmd-spacing-fluid-lg);
}

dmd-wrap {
  box-sizing: border-box;
  display: block;
  margin: auto;
  padding-inline: var(--dmd-spacing);

  &[gutter='xs'] {
    padding-inline: var(--dmd-spacing-xs);
  }

  &[gutter='sm'] {
    padding-inline: var(--dmd-spacing-sm);
  }

  &[gutter='md'] {
    padding-inline: var(--dmd-spacing);
  }

  &[gutter='lg'] {
    padding-inline: var(--dmd-spacing-lg);
  }

  &[gutter='xl'] {
    padding-inline: var(--dmd-spacing-xl);
  }

  &[gutter='none'] {
    padding-inline: 0;
  }

  &[size='xs'] {
    max-width: var(--dmd-wrap-xs);
  }

  &[size='sm'] {
    max-width: var(--dmd-wrap-sm);
  }

  &[size='md'] {
    max-width: var(--dmd-wrap-md);
  }

  &[size='lg'] {
    max-width: var(--dmd-wrap-lg);
  }

  &[size='xl'] {
    max-width: var(--dmd-wrap-xl);
  }

  &[size='xxl'] {
    max-width: var(--dmd-wrap-xxl);
  }

  &[size='xxxl'] {
    max-width: var(--dmd-wrap-xxxl);
  }

  &[size='xxxxl'] {
    max-width: var(--dmd-wrap-xxxxl);
  }
}

dmd-help-text {
  color: var(--dmd-help-text-color);
  font-size: var(--dmd-help-text-font-size);

  &[state='valid'] {
    color: var(--dmd-help-text-color-valid);
  }

  &[state='invalid'] {
    color: var(--dmd-help-text-color-invalid);
  }
}

dmd-icon {
  align-items: baseline;
  color: var(--dmd-theme-icon-color);
  display: inline-flex;

  &::part(icon) {
    align-items: center;
    display: flex;
    height: 1em;
    justify-content: center;
    position: relative;
    top: var(--dmd-icon-baseline-adjust);
    width: var(--dmd-icon-size);
  }

  svg {
    aspect-ratio: 1 / 1;
    display: block;
    flex: 0 0 var(--dmd-icon-size);
    height: var(--dmd-icon-size);
    min-width: var(--dmd-icon-size);
    width: var(--dmd-icon-size);
  }

  &[variant='circle'] {
    &::part(icon)::before {
      background-color: var(--dmd-theme-icon-color);
      border-radius: 100%;
      content: '';
      display: block;
      height: var(--dmd-icon-size);
      position: absolute;
      width: var(--dmd-icon-size);
    }

    svg {
      color: var(--dmd-theme-background);
      transform: scale(0.75);
      z-index: 1;
    }
  }
}

dmd-img {
  display: inline-block;

  &[block],
  &[block] img,
  &[block] dmd-loading-img {
    display: block;
  }

  &[responsive] {
    width: 100%;

    img,
    dmd-loading-img {
      height: auto;
      width: 100%;
    }
  }

  &[radius] {
    border-radius: var(--dmd-radius);
    overflow: hidden;
  }

  &[aspect-ratio],
  &[aspect-ratio] img,
  &[aspect-ratio] dmd-loading-img {
    aspect-ratio: var(--dmd-img-aspect-ratio);
  }

  &[object-fit] img,
  &[object-fit] dmd-loading-img {
    object-fit: var(--dmd-img-object-fit);
  }

  &[object-position] img,
  &[object-position] dmd-loading-img {
    object-position: var(--dmd-img-object-position);
  }
}

dmd-list {
  --dmd-list-spacing: 0;
  display: block;

  li,
  dl > div {
    margin-bottom: var(--dmd-list-spacing);

    &:last-child {
      margin-bottom: 0;
    }
  }

  &[variant='unstyled'] {
    ul,
    ol,
    dl {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
  }

  &[variant='icon'] {
    ul,
    ol {
      list-style-type: none;
      margin-left: 0;
      padding-left: 0;
    }

    li,
    dl > div {
      padding-left: var(--dmd-icon-size);
    }

    dmd-icon {
      /* The 4px handles inline block magic spacing */
      margin-left: calc(-1 * (var(--dmd-icon-size) + 4px));
    }
  }

  &[spacing='xs'] {
    --dmd-list-spacing: var(--dmd-spacing-xs);
  }

  &[spacing='sm'] {
    --dmd-list-spacing: var(--dmd-spacing-sm);
  }

  &[spacing='md'] {
    --dmd-list-spacing: var(--dmd-spacing-md);
  }

  &[spacing='lg'] {
    --dmd-list-spacing: var(--dmd-spacing-lg);
  }

  &[spacing='xl'] {
    --dmd-list-spacing: var(--dmd-spacing-xl);
  }

  &[spacing='fluid'] {
    --dmd-list-spacing: var(--dmd-spacing-fluid);
  }

  &[spacing='fluid-sm'] {
    --dmd-list-spacing: var(--dmd-spacing-fluid-sm);
  }

  &[spacing='fluid-lg'] {
    --dmd-list-spacing: var(--dmd-spacing-fluid-lg);
  }
}

/* Font */

.dmd-text-font-body {
  font-family: var(--dmd-font-family);
  font-size: var(--dmd-font-size-base);
  font-weight: var(--dmd-font-weight-base);
  line-height: var(--dmd-font-line-height);
  text-wrap: pretty;
}

.dmd-text-font-heading {
  font-family: var(--dmd-font-family-heading);
  font-weight: var(--dmd-font-weight-bold);
  line-height: var(--dmd-font-line-height-heading);
  text-wrap: balance;
}

/* Size */

.dmd-text-size-default {
  font-size: var(--dmd-font-size-default);
}

.dmd-text-size-xs {
  font-size: var(--dmd-font-size-xs);
}

.dmd-text-size-sm {
  font-size: var(--dmd-font-size-sm);
}

.dmd-text-size-base {
  font-size: var(--dmd-font-size-base);
}

.dmd-text-size-md {
  font-size: var(--dmd-font-size-md);
}

.dmd-text-size-lg {
  font-size: var(--dmd-font-size-lg);
}

.dmd-text-size-xl {
  font-size: var(--dmd-font-size-xl);
}

.dmd-text-size-xxl {
  font-size: var(--dmd-font-size-xxl);
}

.dmd-text-size-xxxl {
  font-size: var(--dmd-font-size-xxxl);
}

.dmd-text-size-h1 {
  font-size: var(--dmd-font-size-h1);
}

.dmd-text-size-h2 {
  font-size: var(--dmd-font-size-h2);
}

.dmd-text-size-h3 {
  font-size: var(--dmd-font-size-h3);
}

.dmd-text-size-h4 {
  font-size: var(--dmd-font-size-h4);
}

/* Weight */

.dmd-text-weight-light {
  font-weight: var(--dmd-font-weight-light);
}

.dmd-text-weight-medium {
  font-weight: var(--dmd-font-weight-medium);
}

.dmd-text-weight-bold {
  font-weight: var(--dmd-font-weight-bold);
}

.dmd-text-weight-black {
  font-weight: var(--dmd-font-weight-black);
}

.dmd-text-weight-body {
  font-weight: var(--dmd-font-weight-base);
}

.dmd-text-weight-heading {
  font-weight: var(--dmd-font-weight-bold);
}

/* Alignment */

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

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

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

/* Wrap */

.dmd-text-wrap-balance {
  text-wrap: balance;
}

.dmd-text-wrap-pretty {
  text-wrap: pretty;
}

/* Truncate */

.dmd-text-truncate,
.dmd-text-line-limit-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line limit */

.dmd-text-line-limit-2,
.dmd-text-line-limit-3,
.dmd-text-line-limit-4 {
  -webkit-box-orient: vertical;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  overflow: hidden;
}

.dmd-text-line-limit-2 {
  -webkit-line-clamp: 2;
}

.dmd-text-line-limit-3 {
  -webkit-line-clamp: 3;
}

.dmd-text-line-limit-4 {
  -webkit-line-clamp: 4;
}

/* Decoration */

.dmd-text-decoration-none {
  text-decoration: none;
}

dmd-button {
  --_background: var(--dmd-button-background);
  --_background-hover: var(--dmd-button-background-hover);
  --_background-disabled: var(--dmd-button-background-disabled);
  --_border-color: var(--dmd-button-border-color);
  --_border-color-hover: var(--dmd-button-border-color-hover);
  --_border-color-disabled: var(--dmd-button-border-color-disabled);
  --_color: var(--dmd-button-color);
  --_color-hover: var(--dmd-button-color-hover);
  --_color-disabled: var(--dmd-button-color-disabled);
  --_size: 1rem;
  --_padding-block: var(--dmd-button-padding-block);
  --_padding-inline: var(--dmd-button-padding-inline);
  --_line-height: var(--dmd-button-line-height);
  --dmd-icon-baseline-adjust: 0.1em;
  display: inline-block;

  /* Structural button styles */
  dmd-loading-button,
  button,
  a,
  input:not([type='file']),
  input[type='file']::file-selector-button {
    align-items: center;
    appearance: none;
    border-radius: var(--dmd-button-border-radius);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--_size, 1rem);
    font-weight: var(--dmd-button-font-weight);
    gap: var(--dmd-button-gap);
    justify-content: center;
    letter-spacing: inherit;
    line-height: var(--_line-height);
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline);
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    transition:
      background var(--dmd-transition),
      color var(--dmd-transition),
      border-color var(--dmd-transition);
    user-select: none;

    @media (hover: hover) {
      &:not([disabled]):hover {
        --_background: var(--_background-hover);
        --_border-color: var(--_border-color-hover);
        --_color: var(--_color-hover);
      }
    }

    &:not(:active):focus-visible {
      outline-offset: var(--dmd-button-outline-offset);
      position: relative;
      /* This z-index prevents the focus outline from being clipped by the parent */
      z-index: 1;
    }
  }

  /* Presentational button styles */
  button,
  a,
  input:not([type='file']),
  input[type='file']::file-selector-button {
    background: var(--_background);
    border: var(--dmd-border);
    border-color: var(--_border-color);
    color: var(--_color);
    text-shadow: var(--dmd-button-text-shadow);
  }

  svg {
    block-size: var(--dmd-icon-size);
    flex-shrink: 0;
    inline-size: var(--dmd-icon-size);
  }

  [disabled],
  [type='file'][disabled]::file-selector-button {
    --_background: var(--_background-disabled);
    --_color: var(--_color-disabled);
    --_border-color: var(--_border-color-disabled);
    cursor: not-allowed;
  }

  &[size='sm'] {
    --_size: 0.875rem;
  }

  &[size='lg'] {
    --_size: 1.25rem;
  }

  &[width='full-width'] {
    display: block;

    dmd-loading-button,
    button,
    a,
    input {
      width: 100%;
    }
  }

  @media (width < 480px) {
    &[width='full-width-mobile'] {
      display: block;

      dmd-loading-button,
      button,
      a,
      input {
        width: 100%;
      }
    }
  }

  &[width='square'] {
    --_line-height: 1;
    --_padding-inline: var(--dmd-button-padding-block);

    dmd-loading-button,
    button,
    a,
    input {
      aspect-ratio: 1 / 1;
    }
  }

  &[variant='primary'] {
    --_background: var(--dmd-button-primary-background);
    --_background-hover: var(--dmd-button-primary-background-hover);
    --_background-disabled: var(--dmd-button-primary-background-disabled);
    --_border-color: var(--dmd-button-primary-border-color);
    --_border-color-hover: var(--dmd-button-primary-border-color-hover);
    --_border-color-disabled: var(--dmd-button-primary-border-color-disabled);
    --_color: var(--dmd-button-primary-color);
    --_color-hover: var(--dmd-button-primary-color-hover);
    --_color-disabled: var(--dmd-button-primary-color-disabled);
  }

  &[variant='secondary'] {
    --_background: var(--dmd-button-secondary-background);
    --_background-hover: var(--dmd-button-secondary-background-hover);
    --_background-disabled: var(--dmd-button-secondary-background-disabled);
    --_border-color: var(--dmd-button-secondary-border-color);
    --_border-color-hover: var(--dmd-button-secondary-border-color-hover);
    --_border-color-disabled: var(--dmd-button-secondary-border-color-disabled);
    --_color: var(--dmd-button-secondary-color);
    --_color-hover: var(--dmd-button-secondary-color-hover);
    --_color-disabled: var(--dmd-button-secondary-color-disabled);
  }

  &[variant='text'] {
    --_background: var(--dmd-button-text-background);
    --_background-hover: var(--dmd-button-text-background-hover);
    --_background-disabled: var(--dmd-button-text-background-disabled);
    --_border-color: var(--dmd-button-text-border-color);
    --_border-color-hover: var(--dmd-button-text-border-color-hover);
    --_border-color-disabled: var(--dmd-button-text-border-color-disabled);
    --_color: var(--dmd-button-text-color);
    --_color-hover: var(--dmd-button-text-color-hover);
    --_color-disabled: var(--dmd-button-text-color-disabled);
    /* Text button is square */
    --_padding-inline: var(--dmd-button-padding-block);

    dmd-loading-button,
    button,
    a,
    input {
      /* Remove padding whilst retaining a clickable area large enough for thumbs  */
      margin: calc(var(--_padding-block) * -1);
    }
  }

  input[type='file'] {
    background-color: var(--dmd-button-file-background);
    border-radius: var(--dmd-button-border-radius);
    inline-size: 100%;
    max-inline-size: max-content;

    &::file-selector-button {
      margin-inline-end: var(--dmd-spacing);
    }
  }
}

dmd-input {
  --_background: var(--dmd-input-background);
  --_border-color: var(--dmd-input-border-color);
  --dmd-icon-baseline-adjust: 0.1em;

  align-items: center;
  background: var(--_background);
  border: var(--dmd-input-border-width) solid var(--_border-color);
  border-radius: var(--dmd-input-border-radius);
  color: var(--dmd-input-color);
  display: flex;
  min-width: 0;
  position: relative;
  transition:
    border-color var(--dmd-transition),
    background-color var(--dmd-transition);

  &:hover,
  &:focus-within {
    --_border-color: var(--dmd-input-border-color-hover);
  }

  &:has(input:focus-visible),
  &:has(textarea:focus-visible),
  &:has(select:focus-visible) {
    --_background: var(--dmd-input-background-focus);
    /* https://css-tricks.com/copy-the-browsers-native-focus-styles/ */
    outline: 5px auto Highlight;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: var(--dmd-input-outline-offset);
  }

  &[state='valid'] {
    --_border-color: var(--dmd-input-border-color-valid);
  }

  &[state='invalid'] {
    --_border-color: var(--dmd-input-border-color-invalid);
  }

  &:has([disabled]) {
    --_background: var(--dmd-input-background-disabled);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }

  input,
  textarea,
  select {
    appearance: none;
    background: none;
    border: 0 none;
    color: inherit;
    display: block;
    flex: 1 1 auto;
    font-size: var(--dmd-input-font-size);
    line-height: var(--dmd-input-line-height);
    padding: var(--dmd-input-padding);
    width: 100%;

    &:focus {
      outline: none;
    }
  }

  select {
    cursor: pointer;
    margin-right: calc(
      var(--dmd-icon-size) * -1 - var(--dmd-input-padding-inline)
    );
    padding-right: calc(var(--dmd-icon-size) + var(--dmd-input-padding-inline));
  }

  textarea {
    resize: vertical;
  }

  svg {
    align-self: center;
    block-size: var(--dmd-icon-size);
    box-sizing: content-box;
    flex-shrink: 0;
    inline-size: var(--dmd-icon-size);
    pointer-events: none;
  }

  /* Prefix */
  &:has(* + :is(input, textarea, select)) > :first-child {
    margin-right: calc(var(--dmd-input-padding-inline) / 2 * -1);
    padding: 0 0 0 calc(var(--dmd-input-padding-inline) / 2);
  }

  /* Suffix */
  :is(input, textarea, select) + * {
    padding: 0 calc(var(--dmd-input-padding-inline) / 2);
  }

  :is(input, textarea):has(+ *) {
    padding-right: 0;
  }
}

label,
legend {
  align-items: center;
  color: var(--dmd-label-color);
  display: flex;
  font-size: var(--dmd-label-font-size);
  font-weight: var(--dmd-label-font-weight);
  min-height: var(--dmd-label-height);
}

dmd-link {
  --dmd-link-text-decoration: var(--dmd-theme-link-text-decoration);

  a,
  button {
    appearance: none;
    background: none;
    border: 0 none;
    color: var(--dmd-theme-link-color);
    cursor: pointer;
    display: inline;
    margin: 0;
    padding: 0;
    text-align: inherit;
    text-decoration: var(--dmd-link-text-decoration);
  }

  &[variant='underline'] {
    --dmd-link-text-decoration: underline;
  }

  &[variant='no-underline'] {
    --dmd-link-text-decoration: none;
  }
}

dmd-radio-checkbox {
  --_background: var(--dmd-input-background);
  --_border-color: var(--dmd-input-border-color);
  --_border-radius: var(--dmd-input-checkbox-border-radius);
  --_inner-border-radius: 0;
  --_indicator-padding: var(--dmd-input-radio-checkbox-padding);
  --_indicator-width: calc(var(--dmd-font-line-height) * 1em);
  --_indicator-inner-width: 100%;

  align-items: center;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-size: inherit;
  font-weight: inherit;
  gap: var(--dmd-spacing-sm);
  line-height: inherit;
  min-height: var(--dmd-spacing-thumb);

  &:hover,
  &:focus-within {
    --_border-color: var(--dmd-input-border-color-hover);
  }

  &:focus-within:has(input:focus-visible) {
    --_background: var(--dmd-input-background-focus);

    &::part(indicator) {
      /* https://css-tricks.com/copy-the-browsers-native-focus-styles/ */
      outline: 5px auto Highlight;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: var(--dmd-input-outline-offset);
    }
  }

  input {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  label {
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin-left: calc((var(--_indicator-width) + var(--dmd-spacing-sm)) * -1);
    min-height: 0;
    padding-left: calc((var(--_indicator-width) + var(--dmd-spacing-sm)));
  }

  svg,
  img,
  &::part(fallback-icon) {
    display: block;
    height: auto;
    margin: calc(var(--_indicator-padding) * -1);
    opacity: 0;
    position: relative;
    transform: scale(1.45);
    transition:
      transform var(--dmd-transition),
      opacity var(--dmd-transition);
    width: calc(100% - var(--dmd-input-radio-checkbox-padding) * 2);
    z-index: 1;
  }

  &::part(indicator) {
    align-items: center;
    aspect-ratio: 1;
    background: var(--_background);
    border: 1px solid var(--_border-color);
    border-radius: var(--_border-radius);
    box-sizing: border-box;
    color: var(--_background);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: var(--_indicator-padding);
    pointer-events: none;
    position: relative;
    transition:
      border-color var(--dmd-transition),
      background-color var(--dmd-transition);
    width: var(--_indicator-width);
  }

  &::part(indicator)::before {
    aspect-ratio: 1;
    background-color: var(--_border-color);
    border-radius: var(--_inner-border-radius);
    content: '';
    opacity: 0;
    position: absolute;
    transform: scale(0.5);
    transition:
      background-color var(--dmd-transition),
      opacity var(--dmd-transition),
      transform var(--dmd-transition);
    width: var(--_indicator-inner-width);
  }

  &:has(input[type='radio']) {
    --_border-radius: 50%;
    --_inner-border-radius: 50%;
    --_indicator-inner-width: calc(100% - (var(--_indicator-padding) * 2));

    &::part(fallback-icon) {
      visibility: hidden; /* Display none messes up alignment in horizontal forms */
    }
  }

  &:has(input:checked) {
    --_border-color: var(--dmd-input-checked);

    &::part(indicator)::before {
      opacity: 1;
      transform: scale(1);
    }

    svg,
    img,
    &::part(fallback-icon) {
      opacity: 1;
      transform: scale(1.6);
      transition-delay: calc(var(--dmd-transition-duration) / 2);
    }
  }

  &[state='valid'] {
    --_border-color: var(--dmd-input-border-color-valid);
  }

  &[state='invalid'] {
    --_border-color: var(--dmd-input-border-color-invalid);
  }

  &:has([disabled]) {
    --_background: var(--dmd-input-background-disabled);
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
  }
}