/* ! @tesla/design-system 7.3.4 */
/* Tokens */

/* Import v7+ Semantic Tokens from ds tokens */

/**
 * Do not edit directly
 * Generated on Wed, 12 Oct 2022 22:14:28 GMT
 */

 .tds-colorscheme--light,.tds-scrim--white,:root {
  --tds-animation-bezier-base: cubic-bezier(0.5, 0, 0, 0.75);
  --tds-ui-opacity-100: 1;
  --tds-ui-opacity-70: 0.7;
  --tds-ui-opacity-50: 0.5;
  --tds-ui-opacity-30: 0.3;
  --tds-ui-opacity-0: 0;
  --tds-ui-box-shadow-off: 0 0 0 0 transparent;
  --tds-component-pill-padding-inline: 20px;
  --tds-size-half: 4px; /* Used in denser UIs */
  --tds-size-base: 8px; /* TDS generally leverages a base-8 system with this value forming the foundation */
  --tds-size-9x: 72px; /* Base x 9 */
  --tds-size-8x: 64px; /* Base x 8 */
  --tds-size-7x: 56px; /* Base x 7 */
  --tds-size-6x: 48px; /* Base x 6 */
  --tds-size-5x: 40px; /* Base x 5 */
  --tds-size-4x: 32px; /* Base x 4 */
  --tds-size-3x: 24px; /* Base x 3 */
  --tds-size-2x: 16px; /* Base x 2 */
  --tds-size-13x: 104px; /* Base x 13 */
  --tds-size-12x: 96px; /* Base x 12 */
  --tds-size-11x: 88px; /* Base x 11 */
  --tds-size-10x: 80px; /* the large size of the font */
  --tds-font-weight-xlight: 200;
  --tds-font-weight-medium: 500;
  --tds-font-weight-light: 300;
  --tds-font-weight-book: 400;
  --tds-font-weight-bold: 700;
  --tds-font-size-75: 34px;
  --tds-font-size-70: 28px;
  --tds-font-size-55: 23px;
  --tds-font-size-50: 20px;
  --tds-font-size-40: 17px;
  --tds-font-size-30: 14px;
  --tds-font-size-20: 12px;
  --tds-font-size-10: 10px;
  --tds-font-line-height-unitless: 1.414;
  --tds-font-line-height-75: 45px;
  --tds-font-line-height-70: 36px;
  --tds-font-line-height-60: 28px;
  --tds-font-line-height-40: 23px;
  --tds-font-line-height-30: 21px;
  --tds-font-line-height-20: 20px;
  --tds-font-line-height-10: 18px;
  --tds-font-family-thai: "Noto Sans Thai";
  --tds-font-family-monospace: "Fira Code", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --tds-font-family-latin-alt: "Universal Sans";
  --tds-font-family-latin: "Gotham SSm";
  --tds-font-family-korean: "FB New Gothic";
  --tds-font-family-japanese: "AXIS Font Japanese W55", "Hiragino Sans";
  --tds-font-family-hebrew: "Noto Sans Hebrew";
  --tds-font-family-chinese-traditional: "PingFang TC", "Microsoft YaHei";
  --tds-font-family-chinese-simplified: "PingFang SC", "Microsoft YaHei";
  --tds-font-family-chinese-hk: "PingFang HK", "Microsoft YaHei";
  --tds-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tds-font-family-arabic: "Noto Sans Arabic";
  --tds-color-yellow: #fbb01b;
  --tds-color-white: #fff;
  --tds-color-red-20: #ed4e3b;
  --tds-color-red-10: #b74134;
  --tds-color-grey-70: #f4f4f4;
  --tds-color-grey-65: #eee;
  --tds-color-grey-60: #e2e3e3;
  --tds-color-grey-50: #d0d1d2;
  --tds-color-grey-45: #bbb;
  --tds-color-grey-40: #a2a3a5;
  --tds-color-grey-35: #8e8e8e;
  --tds-color-grey-30: #5c5e62;
  --tds-color-grey-25: #444;
  --tds-color-grey-20: #393c41;
  --tds-color-grey-15: #222;
  --tds-color-grey-10: #171a20;
  --tds-color-green: #12bb00;
  --tds-color-blue-40: #3368ff; /* Used for accessible text on black */
  --tds-color-blue-30: #3e6ae1; /* Base blue. */
  --tds-color-blue-20: #3457b1; /* Used for accessible text on light and highlight across all scrims */
  --tds-color-black: #000;
  --tds-border-width-small: 1px;
  --tds-border-width-medium: 2px;
  --tds-border-width-large: 3px;
  --tds-border-width-hairline: 0.5px;
  --tds-border-style: solid;
  --tds-border-radius-outline-only: 0.001px;
  --tds-border-radius-form-item: 20px;
  --tds-border-radius-circle: 100%;
  --tds-ui-box-shadow-small: 0 var(--tds-size-half) var(--tds-size-base) 0 rgba(0,0,0,.08);
  --tds-ui-box-shadow-medium: 0 var(--tds-size-base) var(--tds-size-2x) 0 rgba(0,0,0,.12);
  --tds-ui-box-shadow-large-reverse: 0 -8px var(--tds-size-2x) 0 rgba(0,0,0,.16);
  --tds-ui-box-shadow-large: 0 var(--tds-size-base) var(--tds-size-2x) 0 rgba(0,0,0,.16);
  --tds-component-pill-padding-block: var(--tds-size-2x);
  --tds-component-pill-height: var(--tds-size-5x);
  --tds-component-card-padding: var(--tds-size-2x);
  --tds-size-1x: var(--tds-size-base); /* Identical to the base value */
  --tds-font-size-80: var(--tds-size-5x);
  --tds-font-size-60: var(--tds-size-3x);
  --tds-font-line-height-80: var(--tds-size-6x);
  --tds-font-line-height-50: var(--tds-size-3x);
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-base);
  --tds-border-radius-pill: var(--tds-size-4x);
  --tds-border-radius-card: var(--tds-size-base);
  --tds-border-radius-base: var(--tds-size-half);
  --tds-theme-background-container-alt-highlight: rgba(0,0,0,.075); /* used for hover states only, not available in ui kit */
  --tds-theme-background-container-alt: rgba(0,0,0,.05);
  --tds-theme-secondary-warning: var(--tds-color-yellow);
  --tds-theme-secondary-positive: var(--tds-color-green);
  --tds-theme-secondary-negative: var(--tds-color-red-10);
  --tds-theme-primary-highlight: var(--tds-color-blue-20); /* used for hover states only, not available in ui kit */
  --tds-theme-primary: var(--tds-color-blue-30);
  --tds-theme-foreground-primary: var(--tds-color-blue-30);
  --tds-theme-foreground-on-primary: var(--tds-color-white);
  --tds-theme-foreground-low-contrast: var(--tds-color-grey-30);
  --tds-theme-foreground-inverse: var(--tds-color-black); /* used for hover states only, not available in ui kit */
  --tds-theme-foreground-high-contrast: var(--tds-color-grey-10);
  --tds-theme-foreground: var(--tds-color-grey-20);
  --tds-theme-border-low-contrast: var(--tds-color-grey-60);
  --tds-theme-border: var(--tds-color-grey-50);
  --tds-theme-background-dialog: var(--tds-color-white);
  --tds-theme-background: var(--tds-color-white);
  --tds-theme-background-container-highlight: var(--tds-color-grey-65); /* used for hover states only, not available in ui kit */
  --tds-theme-background-container: var(--tds-color-grey-70);
}

/**
 * Do not edit directly
 * Generated on Wed, 12 Oct 2022 22:14:28 GMT
 */

/**
 * Do not edit directly
 * Generated on Wed, 12 Oct 2022 22:14:28 GMT
 */

.tds-scrim--light {
  --tds-theme-background-container-alt-highlight: rgba(0,0,0,.075); /* used for hover states only, not available in ui kit */
  --tds-theme-background-container-alt: rgba(0,0,0,.05);
  --tds-theme-secondary-warning: var(--tds-color-yellow);
  --tds-theme-secondary-positive: var(--tds-color-green);
  --tds-theme-secondary-negative: var(--tds-color-red-10);
  --tds-theme-primary-highlight: var(--tds-color-blue-20); /* used for hover states only, not available in ui kit */
  --tds-theme-primary: var(--tds-color-blue-30);
  --tds-theme-foreground-primary: var(--tds-color-blue-20);
  --tds-theme-foreground-on-primary: var(--tds-color-white);
  --tds-theme-foreground-low-contrast: var(--tds-color-grey-30);
  --tds-theme-foreground-inverse: var(--tds-color-black); /* used for hover states only, not available in ui kit */
  --tds-theme-foreground-high-contrast: var(--tds-color-grey-10);
  --tds-theme-foreground: var(--tds-color-grey-20);
  --tds-theme-border-low-contrast: var(--tds-color-grey-60);
  --tds-theme-border: var(--tds-color-grey-50);
  --tds-theme-background-dialog: var(--tds-color-white);
  --tds-theme-background: var(--tds-color-grey-70);
  --tds-theme-background-container-highlight: var(--tds-color-grey-65); /* used for hover states only, not available in ui kit */
  --tds-theme-background-container: var(--tds-color-white);
}

/**
 * Do not edit directly
 * Generated on Wed, 12 Oct 2022 22:14:28 GMT
 */

.tds-colorscheme--dark,.tds-scrim--black {
  --tds-theme-background-container-alt-highlight: hsla(0,0%,100%,.25); /* used for hover states only, not available in ui kit */
  --tds-theme-background-container-alt: hsla(0,0%,100%,.135);
  --tds-theme-secondary-warning: var(--tds-color-yellow);
  --tds-theme-secondary-positive: var(--tds-color-green);
  --tds-theme-secondary-negative: var(--tds-color-red-10);
  --tds-theme-primary-highlight: var(--tds-color-blue-20); /* used for hover states only, not available in ui kit */
  --tds-theme-primary: var(--tds-color-blue-30);
  --tds-theme-foreground-primary: var(--tds-color-blue-40);
  --tds-theme-foreground-on-primary: var(--tds-color-white);
  --tds-theme-foreground-low-contrast: var(--tds-color-grey-50);
  --tds-theme-foreground-inverse: var(--tds-color-white); /* used for hover states only, not available in ui kit */
  --tds-theme-foreground-high-contrast: var(--tds-color-white);
  --tds-theme-foreground: var(--tds-color-grey-65);
  --tds-theme-border-low-contrast: var(--tds-color-grey-25);
  --tds-theme-border: var(--tds-color-grey-30);
  --tds-theme-background-dialog: var(--tds-color-grey-15);
  --tds-theme-background: var(--tds-color-black);
  --tds-theme-background-container-highlight: var(--tds-color-grey-20); /* used for hover states only, not available in ui kit */
  --tds-theme-background-container: var(--tds-color-grey-15);
}

/* Old tokens, keep for now */

/* ! Deprecation Notice: props.css and all current tokens set to :root will be deprecated in July 2022.

    Please ensure all your custom props reference the renamed tokens in dist/tokens/css/tokens.css before then.
*/

/*
 * TDS Custom Properties
 * To add a property, declare the css variable below and run a build.
 * This will provide the variable for consumers of both css and js
 *
 * Format:
 * --tds-{property-name}: {base-value};
 * --tds-{property-name}--{modifier}: {value};
 */

.tds-component-preview,:root {
  /* Primitive/Abstract Props */
  --tds-bezier: cubic-bezier(0.5, 0, 0, 0.75);

  /* Sizes */
  --tds-size: 8px;
  --tds-size--10x: 80px;
  --tds-size--11x: 88px;
  --tds-size--12x: 96px;
  --tds-size--13x: 104px;
  --tds-size--1x: 8px;
  --tds-size--2x: 16px;
  --tds-size--3x: 24px;
  --tds-size--4x: 32px;
  --tds-size--5x: 40px;
  --tds-size--6x: 48px;
  --tds-size--7x: 56px;
  --tds-size--8x: 64px;
  --tds-size--9x: 72px;
  --tds-size--half: 4px;

  /* Colors */
  --tds-color--black: #000; /* hsl(0, 0%, 0%); */
  --tds-color--blue10: #2e4994; /* hsl(224, 53%, 38%); */
  --tds-color--blue20: #3457b1; /* hsl(223, 55%, 45%); */
  --tds-color--blue30: #3e6ae1; /* hsl(224, 73%, 56%); */
  --tds-color--green: #12bb00; /* hsl(114, 100%, 37%); */
  --tds-color--grey10: #171a20; /* hsl(220, 16%, 11%); */
  --tds-color--grey15: #222; /* hsl(0, 0%, 13%); */
  --tds-color--grey20: #393c41; /* hsl(218, 7%, 24%); */
  --tds-color--grey25: #444; /* hsl(0, 0%, 27%); */
  --tds-color--grey30: #5c5e62; /* hsl(220, 3%, 37%); */
  --tds-color--grey35: #8e8e8e; /* hsl(0, 0%, 56%); */
  --tds-color--grey40: #a2a3a5; /* hsl(220, 2%, 64%); */
  --tds-color--grey45: #bbb; /* hsl(0, 0%, 73%); */
  --tds-color--grey50: #d0d1d2; /* hsl(210, 2%, 82%); */
  --tds-color--grey60: #e2e3e3; /* hsl(180, 2%, 89%); */
  --tds-color--grey65: #eee; /* hsl(0, 0%, 93%); */
  --tds-color--grey70: #f4f4f4; /* hsl(0, 0%, 96%); */
  --tds-color--red10: #b74134; /* hsl(6, 56%, 46%); */
  --tds-color--red20: #ed4e3b; /* hsl(6, 83%, 58%); */
  --tds-color--white: #fff; /* hsl(0, 0%, 100%); */
  --tds-color--yellow: #fbb01b; /* hsl(40, 97%, 55%); */

  /* font tokens */
  --tds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tds-font-family--arabic: "Noto Sans Arabic";
  --tds-font-family--chinese-hk: "PingFang HK", "Microsoft YaHei";
  --tds-font-family--chinese-simplified: "PingFang SC", "Microsoft YaHei";
  --tds-font-family--chinese-traditional: "PingFang TC", "Microsoft YaHei";
  --tds-font-family--combined: "Gotham SSm", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tds-font-family--hebrew: "Noto Sans Hebrew";
  --tds-font-family--japanese: "AXIS Font Japanese W55", "Hiragino Sans";
  --tds-font-family--korean: "FB New Gothic";
  --tds-font-family--latin: "Gotham SSm";
  --tds-font-family--monospace: "Fira Code", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --tds-font-family--thai: "Noto Sans Thai";
  --tds-font-weight--bold: 700;
  --tds-font-weight--book: 400;
  --tds-font-weight--light: 300;
  --tds-font-weight--medium: 500;
  --tds-font-weight--xlight: 200;

  /* TODO: Refactor these to `blur(16px)` etc */
  --tds-blur--button: 16px;
  --tds-blur--large: 8px;
  --tds-blur--small: 4px;

  /* Base Props */
  --tds-border-radius: 4px;
  --tds-border-radius--card: 4px;
  --tds-border-radius--card--dense: 4px;
  --tds-border-radius--circle: 100%;
  --tds-border-radius--pill: 4px;

  /* essentially 0, but combined with outline-offset 2px,
   * this provides a 4px outline radius on focus */
  --tds-border-radius--outline-only: 0.001px;
  --tds-border-style: solid;
  --tds-border-width--hairline: 1px;
  --tds-border-width--large: 3px;
  --tds-border-width--medium: 2px;
  --tds-border-width--small: 1px;
  --tds-box-shadow--large: 0 8px 16px 0 rgba(0,0,0,.16);
  --tds-box-shadow--large-reverse: 0 -8px 16px 0 rgba(0,0,0,.16);
  --tds-box-shadow--medium: 0 8px 16px 0 rgba(0,0,0,.12);
  --tds-box-shadow--off: 0 0 0 0 transparent;
  --tds-box-shadow--small: 0 4px 8px 0 rgba(0,0,0,.08);
  --tds-font-size--10: 10px;
  --tds-font-size--20: 12px;
  --tds-font-size--30: 14px;
  --tds-font-size--40: 17px;
  --tds-font-size--50: 20px;
  --tds-font-size--55: 23px;
  --tds-font-size--60: 24px;
  --tds-font-size--70: 28px;
  --tds-font-size--75: 34px;
  --tds-font-size--80: 40px;
  --tds-height--choice: 24px;
  --tds-height--pill: 40px;
  --tds-line-height--10: 18px;
  --tds-line-height--20: 20px;
  --tds-line-height--30: 20px;
  --tds-line-height--40: 24px;
  --tds-line-height--50: 24px;
  --tds-line-height--60: 28px;
  --tds-line-height--70: 36px;
  --tds-line-height--75: 44px;
  --tds-line-height--80: 48px;
  --tds-line-height--unitless: 1.414;
  --tds-opacity--100: 1;
  --tds-opacity--30: 0.3;
  --tds-opacity--50: 0.5;
  --tds-opacity--70: 0.7;
  --tds-opacity--transparent: 0;
  --tds-padding--card: 24px;
  --tds-padding--card--dense: 16px;
}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2) {
  .tds-component-preview,:root {
    --tds-border-width--hairline: 0.5px;
  }
}

/* Base */

/* stylelint-disable property-no-vendor-prefix, no-duplicate-selectors, no-descending-specificity, font-family-no-duplicate-names */

.tds-component-preview,:root {
  --tds-base-font_family: var(--tds-font-family--combined);
  --tds-base-font_size: var(--tds-font-size--30);
  --tds-base-line_height: var(--tds-line-height--30);
}

/* Defining "system" font stack used as fallback in --tds-font-family--combined variables */

@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 300;
  src:
    local(".SFNSText-Light"),
    local(".HelveticaNeueDeskInterface-Light"),
    local(".LucidaGrandeUI"),
    local("Ubuntu Light"),
    local("Segoe UI Light"),
    local("Roboto-Light"),
    local("DroidSans"),
    local("Tahoma");
}

* {
  /* Set Box sizing at the element level */
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body,html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

dd,dl,dt,ol,ul {
  list-style-type: none;
}

dd,dl,dt,figcaption,figure,ol,ul {
  margin: 0;
  padding: 0;
}

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

/**
 * Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  -webkit-text-size-adjust: 100%;
  block-size: -webkit-fill-available;
}

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

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

body {
  margin: 0;
  min-block-size: 100vh;

  /* mobile viewport bug fix */
  min-block-size: -webkit-fill-available;
}

/* Text
   ========================================================================== */

li,p {
  max-inline-size: 75ch;
}

li {
  margin: 0;
}

p {
  font-size: var(--tds-font-size--30);
  line-height: var(--tds-line-height--30);
}

/* Baseline typographic pairing, note that we want to avoid padding for ul + ul cases,
 * as those are more frequently used in components like list & navigation,
 * and very rarely in body copy */

:is(ul,ol)+p,p+:is(ul,ol),p+p {
  -webkit-padding-before: 14px;
          padding-block-start: 14px;
}

small {
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--10);
}

body,html {
  font-family: var(--tds-font-family--combined, --tds-base-font_family, system);
  font-size: var(--tds-base-font_size);
  font-weight: 400;
  line-height: var(--tds-base-line_height);
}

h1,h2,h3,h4,h5,h6,p,small {
  display: block;
  margin: 0;
}

h1,h2,h3,h4,h5,h6,li,p,small {
  line-height: var(--tds-line-height--30);
}

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

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

hr {
  background: var(--tds-color--grey50, #d0d1d2);
  block-size: 1px;
  border: none;
  box-sizing: border-box; /* 1 */
  overflow: visible; /* 2 */
}

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

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

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

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

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

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

b,strong {
  font-weight: 500;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

/* 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 */
  font-weight: inherit;
  line-height: inherit; /* 1 */
  margin: 0; /* 2 */
}

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

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

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

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

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

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

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

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

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

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

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

fieldset {
  padding: .35em .75em .625em;
}

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

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

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

progress {
  vertical-align: baseline;
}

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

textarea {
  overflow: auto;
}

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

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

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

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

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

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

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

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

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

/* Remove animations and movemenets globally for users that have turned them off via browser setting */

@media (prefers-reduced-motion:reduce) {
  *,:after,:before {
    animation: none !important;
    transition: none !important;
  }
}

:focus {
  outline: none;
}

/* Note: transition for this property has to be set on other elements that have transitions */

* {
  outline-offset: 2px;
}

/* Baseline focus indication */

:focus-visible {
  outline: var(--tds-outline--focus);
}

/* JS-based fallback for browsers that don't support :focus-visible (Safari >=15.0) */

:where(.tds--indicate-focus) :focus {
  outline: var(--tds-outline--focus);
}

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Disabled State
   ========================================================================== */

/* Reduce visual prominence */

.tds--disabled,[disabled],[disabled]~[class*=tds-form-label] {
  cursor: not-allowed;
  opacity: var(--tds-ui-opacity-50);
}

.tds--disabled [disabled] {
  opacity: unset;
}

/* Prevent interactions */

.tds--disabled *,[disabled] *,[disabled]:after,[disabled]:before,[disabled]~[class*=tds-form-label],[disabled]~[class*=tds-form-label]:after,[disabled]~[class*=tds-form-label]:before {
  pointer-events: none;
}

/*!
Copyright (C) Hoefler & Co.
This software is the property of Hoefler & Co. (H&Co).
Your right to access and use this software is subject to the
applicable License Agreement, or Terms of Service, that exists
between you and H&Co. If no such agreement exists, you may not
access or use this software for any purpose.
This software may only be hosted at the locations specified in
the applicable License Agreement or Terms of Service, and only
for the purposes expressly set forth therein. You may not copy,
modify, convert, create derivative works from or distribute this
software in any way, or make it accessible to any third party,
without first obtaining the written permission of H&Co.
For more information, please visit us at http://typography.com.
*/

/* Latin:
 * For localized stacks, the font-weight property should match the Gotham declaraction,
 * while the actual glyph set should be adjusted for the specific font.
 */

/* Bold */

@font-face {
  font-display: swap;
  font-family: Gotham SSm;
  font-style: normal;
  font-weight: 700;
  src:
    url(/assets/GothamSSm-Bold_Web.woff2)
    format("woff2");
}

/* Medium */

@font-face {
  font-display: swap;
  font-family: Gotham SSm;
  font-style: normal;
  font-weight: 500;
  src:
    url(/assets/GothamSSm-Medium_Web.woff2)
    format("woff2");
}

/* Book */

@font-face {
  font-display: swap;
  font-family: Gotham SSm;
  font-style: normal;
  font-weight: 400;
  src:
    url(/assets/GothamSSm-Book_Web.woff2)
    format("woff2");
}

/* Light */

@font-face {
  font-display: swap;
  font-family: Gotham SSm;
  font-style: normal;
  font-weight: 300;
  src:
    url(/assets/GothamSSm-Light_Web.woff2)
    format("woff2");
}

/* Extra Light */

@font-face {
  font-display: swap;
  font-family: Gotham SSm;
  font-style: normal;
  font-weight: 200;
  src:
    url(/assets/GothamSSm-XLight_Web.woff2)
    format("woff2");
}

/* Chinese (Simplified, Traditional, Hong Kong):
 * Requested by China business teams:
 * Google Fonts don't load in CN, PingFang comes installed on majority of local systems
 */

@font-face {
  font-family: PingFang SC;
  font-weight: 500;
  src: local("PingFang SC Semibold");
}

@font-face {
  font-family: PingFang SC;
  font-weight: 400;
  src: local("PingFang SC Regular");
}

@font-face {
  font-family: PingFang TC;
  font-weight: 500;
  src: local("PingFang TC Semibold");
}

@font-face {
  font-family: PingFang TC;
  font-weight: 400;
  src: local("PingFang TC Regular");
}

@font-face {
  font-family: PingFang HK;
  font-weight: 400;
  src: local("PingFang HK Regular");
}

@font-face {
  font-family: PingFang HK;
  font-weight: 500;
  src: local("PingFang HK Semibold");
}

/* Arabic:
 * Reference: https://fonts.google.com/noto/specimen/Noto+Sans+Arabic
 * Declaration Source: https://fonts.googleapis.com/css?family=Noto+Sans+Arabic:wght@400;500
 */

/* Noto Sans Arabic "Medium" */

@font-face {
  font-display: swap;
  font-family: Noto Sans Arabic;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/notosansarabic/v10/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4rqxzLI.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Sans Arabic "Book" */

@font-face {
  font-display: swap;
  font-family: Noto Sans Arabic;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansarabic/v10/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4rqxzLI.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Hebrew
 * Reference: https://fonts.google.com/noto/specimen/Noto+Sans+Hebrew
 * Declaration source: https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500
 */

/* Noto Sans Hebrew "Medium" */

@font-face {
  font-display: swap;
  font-family: Noto Sans Hebrew;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/notosanshebrew/v35/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72.woff2) format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Sans Hebrew "Book" */

@font-face {
  font-display: swap;
  font-family: Noto Sans Hebrew;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosanshebrew/v35/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzWNf72.woff2) format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Thai
 * Reference: https://fonts.google.com/noto/specimen/Noto+Sans+Thai
 * Declaration source: https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500
 */

/* Noto Sans Thai "Medium" */

@font-face {
  font-display: swap;
  font-family: Noto Sans Thai;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/notosansthai/v20/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hTWsb-P2c.woff2) format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Noto Sans Thai "Book" */

@font-face {
  font-display: swap;
  font-family: Noto Sans Thai;
  font-stretch: 100%;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosansthai/v20/iJWQBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcdfKI2hTWsb-P2c.woff2) format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Colorschemes
   ========================================================================== */

/* Preserve v6- Contextual Tokens to allow folks to continue to use the deprecated syntax */

/* TODO: Update internal token usage in v7 (see color-migration-notes.md) */

/* TODO: Remove these in TDS v8 */

/* Scrim: (in a theater) a piece of gauze cloth that appears opaque
 until lit from behind, used as a screen or backdrop.

 In TDS Scrims represent a specific background color applied to a section,
 similar to a sub-theme.
 --------------------------------------------------------------- */

[class*=tds-scrim--] {
  /* Deliberately leave the default background undefined, so that components can specify a fallback */
  background-color: var(--tds-theme-background);
}

/* Light (Default) */

.tds-colorscheme--light,.tds-scrim--light,.tds-scrim--white,:root {
  /* Old color tokens kept for backwards-compatibility. These will be removed in a future version */
  --tds-color--error: var(--tds-color-red-10);
  --tds-color--hairline: var(--tds-color-grey-50);
  --tds-color--inverse: var(--tds-color-white);
  --tds-color--primary: var(--tds-color-blue-30);
  --tds-color--primary-highlight: var(--tds-color-blue-20);
  --tds-color--rgb-shade: 0, 0, 0;
  --tds-color--rgb-shade--inverse: 255, 255, 255;
  --tds-color--scrim--semitransparent: hsla(0,0%,100%,.7);
  --tds-color--secondary: var(--tds-color-grey-10);
  --tds-color--secondary-accent: var(--tds-color-grey-50);
  --tds-color--secondary-highlight: var(--tds-color-black);
  --tds-color--tertiary: var(--tds-color-grey-70);
  --tds-color--tertiary-highlight: var(--tds-color-grey-65);
  --tds-caption--color: var(--tds-color-grey-30);
  --tds-dialog--background-color: var(--tds-color-white);
  --tds-form-label--color: var(--tds-color-grey-30);
  --tds-heading--color: var(--tds-color-grey-10);
  --tds-pill--blur-color: rgba(0,0,0,.048);
  --tds-pill--blur-color-highlight: rgba(0,0,0,.072);
  --tds-text--color: var(--tds-color-grey-20);
  --tds-text--color--light: var(--tds-color-grey-30);
  --tds-text--color--placeholder: var(--tds-color-grey-40);
  --tds-text--color--primary: var(--tds-color-blue-30);
  --tds-toggle--background-color: hsla(0,0%,59%,.1);
  --tds-toggle--fill-color: var(--tds-color-white);
  --tds-text--contrast-high: var(--tds-color-grey-10);
  --tds-text--contrast-low: var(--tds-color-grey-30);
  --tds-text--contrast-medium: var(--tds-color-grey-20);
  --tds-code-bg-color: var(--tds-color-grey-70);
  --tds-code-border-color: var(--tds-color-grey-60);
  --tds-code-color: var(--tds-text--color);
  --tds-color--focus: var(--tds-color-grey-35);
  --tds-outline--focus: 2px solid var(--tds-color--focus);

  /* css-encoded icons for special cases */
  --tds-background-image--check: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="hsl(218, 7%, 24%)" d="M6.592 11.58a.748.748 0 0 1-.53-.22L3.22 8.517a.75.75 0 1 1 1.06-1.061l2.312 2.312L11.72 4.64a.75.75 0 1 1 1.06 1.06l-5.658 5.66a.748.748 0 0 1-.53.22z"/></svg>');
  --tds-background-image--minus: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="hsl(218, 7%, 24%)" d="M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z"/></svg>');

  /* Default color should be set by the semantic token */
  color: var(--tds-theme-foreground);
}

.tds-scrim--white {
  --tds-dialog--background-color: var(--tds-color-white);
  --tds-scrim--background: var(--tds-color-white);
}

.tds-scrim--light {
  --tds-color--tertiary: var(--tds-color-white);
  --tds-scrim--background: var(--tds-color-grey-70);
  --tds-text--color--primary: #3865e0;
  --tds-code-bg-color: var(--tds-color-grey-60);
  --tds-code-border-color: var(--tds-color-grey-50);
  --tds-code-color: var(--tds-text--color);
  --tds-color--focus: var(--tds-color-grey-30);
  --tds-outline--focus: 2px solid var(--tds-color--focus);
}

/* Light Scrim override for dialogs and elevated elements that have white backgrounds
 * Note that this can't be placed on the component itself, as some of the components rely on
 * --tds-color--tertiary for their own background
*/

.tds-scrim--light .tds-card>*,.tds-scrim--light .tds-modal>*,.tds-scrim--light .tds-tooltip>* {
  --tds-code-bg-color: var(--tds-color-grey-70);
  --tds-code-border-color: var(--tds-color-grey-60);
  --tds-color--tertiary: var(--tds-color-grey-70);
}

/* Dark */

.tds-colorscheme--dark,.tds-scrim--black {
  /* Old color tokens kept for backwards-compatibility. These will be removed in a future version */
  --tds-box-shadow--large: 0 8px 16px 0 rgba(0,0,0,.8);
  --tds-box-shadow--medium: 0 8px 16px 0 rgba(0,0,0,.6);
  --tds-box-shadow--small: 0 4px 8px 0 rgba(0,0,0,.4);
  --tds-color--error: var(--tds-color--red20);
  --tds-color--hairline: var(--tds-color-grey-35);
  --tds-color--inverse: var(--tds-color-black);
  --tds-color--rgb-shade: 255, 255, 255;
  --tds-color--rgb-shade--inverse: 0, 0, 0;
  --tds-color--scrim--semitransparent: rgba(0,0,0,.7);
  --tds-color--secondary: var(--tds-color-grey-70);
  --tds-color--secondary-accent: var(--tds-color-grey-35);
  --tds-color--secondary-highlight: var(--tds-color-white);
  --tds-color--tertiary: var(--tds-color-grey-15);
  --tds-color--tertiary-highlight: var(--tds-color-grey-20);
  --tds-caption--color: var(--tds-color-grey-50);
  --tds-dialog--background-color: var(--tds-color-grey-15);
  --tds-form-label--color: var(--tds-color-grey-50);
  --tds-heading--color: var(--tds-color-white);
  --tds-pill--blur-color: hsla(0,0%,100%,.13);
  --tds-pill--blur-color-highlight: hsla(0,0%,100%,.24);
  --tds-text--color: var(--tds-color-grey-60);
  --tds-text--color--light: var(--tds-color-grey-50);
  --tds-text--color--primary: #3368ff;
  --tds-toggle--background-color: hsla(0,0%,100%,.2);
  --tds-toggle--fill-color: var(--tds-color-grey-30);
  --tds-text--contrast-high: var(--tds-color-white);
  --tds-text--contrast-low: var(--tds-color-grey-40);
  --tds-text--contrast-medium: var(--tds-color-grey-60);
  --tds-code-bg-color: var(--tds-color-grey-10);
  --tds-code-border-color: var(--tds-color-grey-15);
  --tds-code-color: var(--tds-text--color);

  /* css-encoded icons for special cases */
  --tds-background-image--check: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="hsl(180, 2%, 89%)" d="M6.592 11.58a.748.748 0 0 1-.53-.22L3.22 8.517a.75.75 0 1 1 1.06-1.061l2.312 2.312L11.72 4.64a.75.75 0 1 1 1.06 1.06l-5.658 5.66a.748.748 0 0 1-.53.22z"/></svg>');
  --tds-background-image--minus: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="hsl(180, 2%, 89%)" d="M13 8a.75.75 0 0 1-.75.75h-8.5a.75.75 0 0 1 0-1.5h8.5A.75.75 0 0 1 13 8z"/></svg>');

  /* Default color should be set by the semantic token */
  color: var(--tds-theme-foreground);
}

.tds-scrim--black {
  --tds-scrim--background: var(--tds-color-black);
}

/* Dark Scrim override for some of the components as they rely on
 * inheriting the background color from a distant parent element
 * which, alone, doesn't vibe well with Firefox and leads to a
 * transparent background with light text that is unreadable.
*/

.tds-colorscheme--dark .tds-form-input-select:focus,.tds-scrim--black .tds-form-input-select:focus {
  background-color: var(--tds-theme-background-container);
}

/* Density
   ========================================================================== */

/* Separate from themes, the relative density of elements can be modified
 * currently (for TDS v6) this only applies within forms
 * Note that themes may set these tokens as well, which sets that theme's
 * default density, but those defaults should still be overridable by the
 * explicit modifiers below
 --------------------------------------------------------------- */

.tds-density--default,:root {
  --tds-border-radius--pill: var(--tds-size--half);
  --tds-data-table--font-size: 14px;
  --tds-height--pill: var(--tds-size--5x);

  /* Forms */
  --tds-form--gap: var(--tds-size--3x);
  --tds-form--indent: 0;
  --tds-form-input--collapsed-inline-size: var(--tds-size--5x);
  --tds-form-input--collapsed-padding-inline-start: var(--tds-size--1x);
  --tds-form-input-choice--check-size: var(--tds-size--2x);
  --tds-form-input-choice--radio-size: 10px;
  --tds-height--choice: var(--tds-size--3x);
}

/* Note: enterprise should be interchangeable with density--dense for TDS v6 */

.tds-density--dense {
  --tds-banner--padding: var(--tds-size--1x);
  --tds-card--border-radius: var(--tds-border-radius--card--dense);
  --tds-card--padding: var(--tds-padding--card--dense);
  --tds-content_container--max_width: 1824px;
  --tds-data-table--font-size: 12px;

  /* Forms */
  --tds-form--gap: var(--tds-size--2x);
  --tds-form--indent: 0;
  --tds-form-input--collapsed-inline-size: var(--tds-size--4x);
  --tds-form-input--collapsed-padding-inline-start: var(--tds-size--half);
  --tds-form-input-choice--check-size: 14px;
  --tds-form-input-choice--radio-size: var(--tds-size--1x);
  --tds-height--choice: var(--tds-size--2x);
}

/* PROTOTYPE - Possibly future defaults for a "Factory Theme", use at your own risk */

.tds-density--low {
  --tds-border-radius--pill: var(--tds-size--1x);
  --tds-form--indent: 0;
  --tds-height--pill: var(--tds-size--6x);

  /* Choices */
  --tds-form--gap: var(--tds-size--4x);
  --tds-form-input-choice--check-size: 20px;
  --tds-form-input-choice--radio-size: var(--tds-size--2x);
  --tds-height--choice: var(--tds-size--3x);
}

.tds-theme--v6 {
  --tds-form--indent: 20px;
}

.tds-density--dense .tds-theme--v6,.tds-theme--v6 .tds-density--dense,.tds-theme--v6.tds-density--dense {
  --tds-form--indent: var(--tds-size--2x);
}

.tds-density--default .tds-theme--v6,.tds-theme--v6 .tds-density--default,.tds-theme--v6.tds-density--default {
  --tds-form--indent: 20px;
}

.tds-density--low .tds-theme--v6,.tds-theme--v6 .tds-density--low,.tds-theme--v6.tds-density--low {
  --tds-border-radius--pill: calc(var(--tds-size--6x)/2);
}

.tds-theme--v6 :is(.tds-density--default,.tds-density--dense),.tds-theme--v6:is(.tds-density--default,.tds-density--dense),:is(.tds-density--default,.tds-density--dense) .tds-theme--v6 {
  --tds-border-radius--pill: calc(var(--tds-size--5x)/2);
}

/* Themes */

/* -- Marketing Theme Overrides
----------------------------------------------------------------------------- */

.tds-colorscheme--light .tds-theme--marketing,.tds-scrim--light .tds-theme--marketing,.tds-scrim--white .tds-theme--marketing,.tds-theme--marketing,.tds-theme--marketing .tds-colorscheme--light,.tds-theme--marketing .tds-scrim--light,.tds-theme--marketing .tds-scrim--white,.tds-theme--marketing.tds-colorscheme--light,.tds-theme--marketing.tds-scrim--light,.tds-theme--marketing.tds-scrim--white {
  --tds-color--primary: var(--tds-color-grey-10);
  --tds-color--primary-highlight: var(--tds-color-grey-20);

  /* Semantic colors (v7+) */
  --tds-theme-foreground-on-primary: var(--tds-color--white);
  --tds-theme-primary: var(--tds-color-grey-10);
  --tds-theme-primary-highlight: var(--tds-color-grey-20);
}

.tds-colorscheme--dark .tds-theme--marketing,.tds-scrim--black .tds-theme--marketing,.tds-theme--marketing .tds-colorscheme--dark,.tds-theme--marketing .tds-scrim--black,.tds-theme--marketing.tds-colorscheme--dark,.tds-theme--marketing.tds-scrim--black {
  --tds-color--primary: var(--tds-color-white);
  --tds-color--primary-highlight: var(--tds-color-grey-60);

  /* Semantic colors (v7+) */
  --tds-theme-foreground-on-primary: var(--tds-color--black);
  --tds-theme-primary: var(--tds-color-white);
  --tds-theme-primary-highlight: var(--tds-color-grey-60);
}

.tds-theme--marketing :is(.tds-colorscheme--dark,.tds-scrim--black) .tds-date-picker,.tds-theme--marketing:is(.tds-colorscheme--dark,.tds-scrim--black) .tds-date-picker,:is(.tds-colorscheme--dark,.tds-scrim--black) .tds-theme--marketing .tds-date-picker {
  --tds-date-selected--color: var(--tds-color-grey-20);
}

/**
 * User Preference for Dark Mode
 * **** PROTOTYPE CODE ****
 *
 * Please note, Dark mode support is provided as-is, no-guarantees,
 * and is subject to unannounced changes. Use at your own risk.
 */

@media (prefers-color-scheme:dark) {
  .tds--supports-darkmode.tds-colorscheme--light .tds-theme--marketing,.tds--supports-darkmode.tds-theme--marketing,.tds--supports-darkmode.tds-theme--marketing .tds-colorscheme--light,.tds--supports-darkmode.tds-theme--marketing .tds-scrim--light,.tds--supports-darkmode.tds-theme--marketing .tds-scrim--white,.tds--supports-darkmode.tds-theme--marketing.tds-colorscheme--light,.tds--supports-darkmode.tds-theme--marketing.tds-scrim--light,.tds--supports-darkmode.tds-theme--marketing.tds-scrim--white {
    --tds-color--primary: var(--tds-color-white);
    --tds-color--primary-highlight: var(--tds-color-grey-60);

    /* Semantic colors (v7+) */
    --tds-theme-primary: var(--tds-color-white);
    --tds-theme-primary-highlight: var(--tds-color-grey-60);
    --tds-theme-foreground-on-primary: var(--tds-color--black);
  }
}

/* -- Replicant Theme Overrides
   -- Alternate appearance for TDS (for Cybertruck-related content)
   -- Defaults to a dark colorscheme, but can be reversed
----------------------------------------------------------------------------- */

.tds-theme--replicant {
  /* Glow Effect */
  --tds-glow--bright: drop-shadow(0 0 var(--tds-size--2x) rgba(var(--tds-color--rgb-shade), 0.5));
  --tds-glow--medium: drop-shadow(0 0 var(--tds-size--1x) rgba(var(--tds-color--rgb-shade), 0.33));
  --tds-glow--off: drop-shadow(0 0 0 rgba(var(--tds-color--rgb-shade), 0.33));
  --tds-theme-background-container: transparent;
  --tds-theme-foreground-primary: var(--tds-color--white);

  /* solid background */
  --tds-notch: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

  /* 4px border */
  --tds-notch--outline:
    polygon(
      0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 4px,
      4px 4px,
      4px calc(100% - 4px),
      calc(100% - 12px) calc(100% - 4px),
      calc(100% - 4px) calc(100% - 12px),
      calc(100% - 4px) 4px,
      0 4px
    );

  /* 1px border */
  --tds-notch--outline-thin:
    polygon(
      0 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 1.5px,
      1.5px 1.5px,
      1.5px calc(100% - 1.5px),
      calc(100% - 11.5px) calc(100% - 1.5px),
      calc(100% - 1.5px) calc(100% - 11.5px),
      calc(100% - 1.5px) 1.5px,
      0 1.5px
    );

  /* Fading/glowing Line */
  --tds-fading-line:
    linear-gradient(
      to right,
      rgba(var(--tds-color--rgb-shade), 1) 0%,
      rgba(var(--tds-color--rgb-shade), 1) 50%,
      rgba(var(--tds-color--rgb-shade), 0.1) 100%
    );

  /* Shapes */
  --tds-border-radius: 0;
  --tds-border-radius--card: 0;
  --tds-border-radius--card--dense: 0;
  --tds-border-radius--outline-only: 0;
  --tds-border-radius--pill: 0;
  --tds-heading--font-weight: var(--tds-font-weight--bold);
  --tds-heading--letter-spacing: 0.145em;
  --tds-heading--text-transform: uppercase;

  /* Forms */
  --tds-form--indent: 0;
  --tds-form-input-choice--check-size: 16px;
  --tds-form-input-choice--radio-size: 10px;
  --tds-height--choice: var(--tds-size--2x);

  /* Default Styles */
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--30);
}

/* Scrims should have no background in Replicant environments */

.tds-theme--replicant [class*=tds-scrim--]:not(.tds-scrim--blur) {
  /* TODO: This rule should be set by the body tag, investigate why it's not */
  color: var(--tds-theme-foreground);
}

/*
  TODO Document this no-bg solution for the likes of Ricky P. and into the Migration Docs
*/

.tds-theme--replicant--has_img [class*=tds-scrim--]:not(.tds-scrim--blur) {
  --tds-theme-background: transparent;
}

/**
 * Replicant modifications to the Light/Dark colorschemes
 * - Covers several use-cases:
 * 1. Light/Dark set at root, Replicant is a section of the page
 * 2. Replicant set at root, Light/Dark for different sections of the page
 * 3. Replicant set at root, Dark set at root or close to it, Light for a section to override it
 * -- NOTE: flipflopping overrides handled for us by customProps
 * 4. Replicant and Light/Dark set at the same level to specify a specific version
 * 5. White/Light/Black scrim used instead of colorscheme ???
*/

/**
 * User Preference for Dark Mode
 * **** PROTOTYPE CODE ****
 *
 * Please note, Dark mode support is provided as-is, no-guarantees,
 * and is subject to unannounced changes. Use at your own risk.
 */

@media (prefers-color-scheme:dark) {
  .tds-theme--replicant.tds--supports-darkmode:not([class*=tds-colorscheme--]) {
    /* Colors */
    --tds-color--primary: var(--tds-color--white);
    --tds-color--primary-highlight: var(--tds-color--white);
    --tds-color--secondary: var(--tds-color--white);
    --tds-color--tertiary: transparent;
    --tds-dialog--background-color: var(--tds-color--black);

    /* Body copy */
    --tds-text--color: var(--tds-color--grey45);
    --tds-text--color--light: var(--tds-color--grey35);
  }

  .tds-theme--replicant.tds--supports-darkmode:not([class*=tds-scrim--]):not([class*=tds-colorscheme--]) {
    background-color: var(--tds-color--black);
  }
}

/* Light colorscheme should also be the default */

.tds-colorscheme--light .tds-theme--replicant,.tds-scrim--light .tds-theme--replicant,.tds-scrim--white .tds-theme--replicant,.tds-theme--replicant,.tds-theme--replicant .tds-colorscheme--light,.tds-theme--replicant .tds-scrim--light,.tds-theme--replicant .tds-scrim--white,.tds-theme--replicant.tds-colorscheme--light,.tds-theme--replicant.tds-scrim--light,.tds-theme--replicant.tds-scrim--white {
  /* Colors */
  --tds-color--primary: var(--tds-color--black);
  --tds-color--primary-highlight: var(--tds-color--black);
  --tds-color--secondary: var(--tds-color--black);
  --tds-color--tertiary: transparent;

  /* Semantic colors (v7+) */
  --tds-theme-foreground-on-primary: var(--tds-color--white);
  --tds-theme-primary: var(--tds-color-grey-10);
  --tds-theme-primary-highlight: var(--tds-color-grey-10);
}

.tds-colorscheme--dark .tds-theme--replicant,.tds-scrim--black .tds-theme--replicant,.tds-theme--replicant .tds-colorscheme--dark,.tds-theme--replicant .tds-scrim--black,.tds-theme--replicant.tds-colorscheme--dark,.tds-theme--replicant.tds-scrim--black {
  /* Colors */
  --tds-color--primary: var(--tds-color--white);
  --tds-color--primary-highlight: var(--tds-color--white);
  --tds-color--secondary: var(--tds-color--white);
  --tds-color--tertiary: transparent;
  --tds-dialog--background-color: var(--tds-color--black);

  /* Body copy */
  --tds-text--color: var(--tds-color--grey45);
  --tds-text--color--light: var(--tds-color--grey35);
  --tds-text--color--placeholder: var(--tds-color--grey45);

  /* Semantic colors (v7+) */
  --tds-theme-foreground-on-primary: var(--tds-color--black);
  --tds-theme-primary: var(--tds-color-white);
  --tds-theme-primary-highlight: var(--tds-color-grey-60);
}

@keyframes tds-flicker-on--soft {
  0% {
    opacity: .25;
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: .25;
  }

  24% {
    opacity: 0;
  }

  48% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tds-flicker--soft {
  0% {
    opacity: 1;
  }

  8% {
    opacity: .25;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: .25;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: .25;
  }

  48% {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

.tds-theme--replicant :is(.tds-colorscheme--dark,.tds-scrim--black) .tds-date-picker,.tds-theme--replicant:is(.tds-colorscheme--dark,.tds-scrim--black) .tds-date-picker,:is(.tds-colorscheme--dark,.tds-scrim--black) .tds-theme--replicant .tds-date-picker {
  --tds-date-selected--color: var(--tds-color--grey20);
}

/* -- Up-Scaled Theme Overrides
----------------------------------------------------------------------------- */

/* TODO: Increase the size of touch-targets, without messing too much with anything else */

.tds-theme--factory {
  --tds-size: 12px;
}

/* RR Theme Overrides
 * Default theme in v7, provided as a specialized theme in v5 and v6
 * Start with updating tokens
 * In v7, this provides a backwards-compat theme for v6-style UI
----------------------------------------------------------------------------- */

.tds-theme--v6 {
  --tds-border-radius--card: 16px;
  --tds-border-radius--card--dense: 8px;
  --tds-border-radius--pill: 20px;
}

/* Components */

/* TDS Banner
 * -- Intended for use with tds--padding and a scrim */

.tds-component-preview,:root {
  --tds-banner--padding: var(--tds-size--2x);
}

.tds-banner {
  inline-size: 100%;
  padding: var(--tds-banner--padding);
  text-align: center;
}

.tds-banner:not([class*=tds-scrim--]) {
  background-color: var(--tds-theme-background-container);
}

.tds-breadcrumbs {
  --tds-breadcrumb-padding: 6px;
  -webkit-margin-start: calc(var(--tds-breadcrumb-padding)*-2);
  color: var(--tds-theme-foreground-low-contrast);
  font-size: var(--tds-font-size--30);
          margin-inline-start: calc(var(--tds-breadcrumb-padding)*-2);
}

.tds-breadcrumb,.tds-breadcrumbs {

  align-items: center;
  display: flex;
}

.tds-breadcrumb {
  border-radius: var(--tds-border-radius--pill);
  -moz-column-gap: calc(var(--tds-size--half)/2);
       column-gap: calc(var(--tds-size--half)/2);
}

.tds-breadcrumb,.tds-breadcrumbs-current {
  padding: var(--tds-breadcrumb-padding) calc(var(--tds-breadcrumb-padding)*2);
}

.tds-breadcrumb--overflow {
  padding: var(--tds-size--1x);
}

.tds-breadcrumb--shallow .tds-icon {
  -webkit-margin-start: calc(var(--tds-size--half)*-1);
          margin-inline-start: calc(var(--tds-size--half)*-1);
}

.tds-breadcrumb:not([disabled],.tds--disabled) {
  cursor: pointer;
}

.tds-breadcrumb:hover,.tds-breadcrumbs-current {
  color: var(--tds-theme-foreground-high-contrast);
}

.tds-breadcrumb-tooltip-actions {
  -webkit-padding-after: var(--tds-size--1x);
  -webkit-padding-before: var(--tds-size--1x);
  display: grid;
          padding-block-end: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
}

.tds-breadcrumb-tooltip-action {
  padding: var(--tds-breadcrumb-padding) calc(var(--tds-size--3x) - var(--tds-size--half));
}

.tds-breadcrumb-tooltip-action:is(:focus-visible,.tds--focus) {
  border-radius: var(--tds-size--half);
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}

.tds-breadcrumb-tooltip-action:hover,.tds-breadcrumb:hover {
  background-color: var(--tds-theme-background-container-alt);
  transition: color .33s ease,background-color .33s ease;
}

.tds-component-preview,:root {
  --tds-btn--font-size: var(--tds-font-size--30);
}

/* In Arabic, the font in the button is too small. */

[lang=ar-AE],[lang=ar-AE] body,[lang=he-IL],[lang=he-IL] body,html[lang=ar-AE],html[lang=he-IL] {
  --tds-btn--font-size: var(--tds-font-size--40);
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  color: inherit;
  padding: 0;
}

button:where(:focus,.tds--focus) {
  border-radius: var(--tds-border-radius--outline-only);
  outline: var(--tds-outline--focus);
}

[role=button] {
  cursor: pointer;
}

/* Base Button */

.tds-btn {
  --tds-btn--background-color: var(--tds-theme-primary);
  --tds-btn--border-color: transparent;
  --tds-btn--border-radius: var(--tds-border-radius--pill);

  /* Probably generic pill styles, cross-reference with tds-btn */
  align-items: center;
  background-color: var(--tds-btn--background-color);
  block-size: var(--tds-height--pill);
  border: var(--tds-border-width--large) solid var(--tds-btn--border-color);
  border-radius: var(--tds-btn--border-radius);
  box-shadow: inset 0 0 0 var(--tds-border-width--medium) transparent;
  color: var(--tds-theme-foreground-on-primary);
  display: inline-flex;
  font-family: var(--tds-font-family--combined);
  font-size: var(--tds-btn--font-size);
  font-weight: var(--tds-font-weight--medium);
  justify-content: center;
  line-height: 1.2;
  padding: var(--tds-size--half) var(--tds-size--3x);
  position: relative;
  text-align: center;

  /* Button-specific styles */
  text-transform: inherit;
  transition: border-color .33s ease,background-color .33s ease,color .33s ease,box-shadow .25s ease;
}

button.tds-btn {
  vertical-align: middle;
}

/* Widths */

/* TODO: Should we define specific widths? */

@media (min-width:600px) {
  .tds-btn {
    inline-size: auto;
  }

  .tds-btn--width-full {
    inline-size: 100%;
    inline-size: -webkit-fill-available;
  }
}

@media (max-width:599px) {
  .tds-btn {
    inline-size: 100%;
    inline-size: -webkit-fill-available;
  }

  .tds-btn--width-auto {
    inline-size: auto;
  }
}

/* Sizes */

.tds-btn--small {
  --tds-height--pill: 28px;

  font-size: var(--tds-font-size--20);
}

/* Dense layouts should default to medium size buttons */

.tds-btn--medium,.tds-density--dense {
  --tds-height--pill: var(--tds-size--4x);
}

.tds-btn--large {
  --tds-border-radius--pill: var(--tds-size--half);
  --tds-height--pill: var(--tds-size--5x);
}

/* Variants */

.tds-btn--secondary {
  --tds-btn--background-color: transparent;
  --tds-btn--border-color: var(--tds-theme-foreground-high-contrast);

  color: var(--tds-theme-foreground-high-contrast);
}

/* Special case, outlined buttons should have highest-possible contrast text in dark environments */

:is(.tds-colorscheme--dark,.tds-scrim--black) .tds-btn--secondary {
  --tds-btn--border-color: var(--tds-color-white);

  color: var(--tds-color-white);
}

.tds-btn--tertiary {
  --tds-btn--background-color: var(--tds-theme-background-container);

  color: var(--tds-theme-foreground);
}

/* Hover & Focus */

:is(button,.tds-btn):not([disabled],.tds--disabled):is(:hover,.tds--hover) {
  cursor: pointer;
}

.tds-btn:is(:focus,.tds--focus) {
  box-shadow: inset 0 0 0 var(--tds-border-width--medium);
  outline: none;
}

.tds-btn:not([disabled],.tds--disabled):is(:hover,.tds--hover) {
  --tds-btn--background-color: var(--tds-theme-primary-highlight);
}

.tds-btn--secondary:not([disabled],.tds--disabled):is(:hover,.tds--hover,:focus,.tds--focus) {
  --tds-btn--background-color: var(--tds-theme-foreground-high-contrast);

  color: var(--tds-color--inverse);
}

.tds-btn--tertiary:not([disabled],.tds--disabled):is(:hover,.tds--hover) {
  --tds-btn--background-color: var(--tds-color--tertiary-highlight);
}

/* Icon support */

.tds-btn>.tds-icon--inline:first-child {
  -webkit-margin-start: calc(var(--tds-size--1x)*-1);
          margin-inline-start: calc(var(--tds-size--1x)*-1);
}

.tds-btn>.tds-icon--inline:last-child {
  -webkit-margin-end: calc(var(--tds-size--1x)*-1);
          margin-inline-end: calc(var(--tds-size--1x)*-1);
}

/* Card-specific override for tertiary buttons */

.tds-card:not(.tds-card--outline,.tds-scrim--white .tds-card--highlighted) .tds-btn--tertiary {
  --tds-btn--background-color: var(--tds-theme-background);
}

/* -- TDS Button -- Tile Variant from TDS Inspo Design
 * TODO: Move this to prototypes
----------------------------------------------------------------------------- */

.tds-btn--tile-container {
  --tds-tile-spacer: var(--tds-size--4x);

  margin: var(--tds-size--3x) 0;
  position: relative;
}

.tds-btn.tds-btn--tile {
  background: var(--tds-color-grey-70);
  border-radius: 10px;
  box-shadow: 0 0 0 0 transparent;
  color: #333;
  inline-size: 100%;
  padding: var(--tds-size--8x);
  transition: box-shadow .5s cubic-bezier(.5, 0, 0, .75);
}

@media (min-width:600px) {
  .tds-btn.tds-btn--tile {
    -webkit-margin-end: var(--tds-tile-spacer);
    inline-size: auto;
            margin-inline-end: var(--tds-tile-spacer);
    max-inline-size: 400px;
    min-inline-size: 300px;
  }
}

/* If within a container, make the whole tile clickable */

.tds-btn--tile-container .tds-btn.tds-btn--tile {
  /* Adjust the button so that the overlay */
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  position: static;
}

.tds-btn.tds-btn--tile:is(:hover,.tds--hover) {
  box-shadow: 0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color-grey-50);
}

.tds-btn.tds-btn--tile:is(:focus,.tds--focus) {
  box-shadow:
    0 var(--tds-size--3x) var(--tds-size--4x) 0 var(--tds-color-grey-50),
    inset 0 0 0 2px var(--tds-color-grey-70),
    inset 0 0 0 4px var(--tds-color-grey-50);
  outline: none;
}

.tds-btn--tile-container .tds-btn.tds-btn--tile:before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: var(--tds-tile-spacer);
  top: 0;
}

.tds-btn--tile-description {
  color: var(--tds-color-grey-40);
  max-inline-size: 300px;
  padding: var(--tds-size--1x);
}

/* Add spacing when the description is properly placed after a tile */

.tds-btn--tile+.tds-btn--tile-description {
  -webkit-margin-before: var(--tds-size--4x);
          margin-block-start: var(--tds-size--4x);
}

.tds-btn--tile-description:before {
  -webkit-margin-after: var(--tds-size--2x);
  background-color: var(--tds-color-grey-50);
  block-size: 2px;
  content: "";
  display: block;
  inline-size: var(--tds-size--2x);
          margin-block-end: var(--tds-size--2x);
}

.tds-btn_group {
  align-items: center;
  display: grid;
  gap: var(--tds-size--2x) var(--tds-size--3x);
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  justify-content: stretch;

  /* TODO: Remove down the road when scope of layout responsibilities moves more towards containers */
  margin: var(--tds-size--2x) 0;
}

/* Layouts */

@media (max-width:599px) {
  .tds-btn_group {
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  }

  .tds-btn_group--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (min-width:600px) {
  .tds-btn_group {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .tds-btn_group--vertical {
    grid-template-columns: none;
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
  }
}

/* Variants */

.tds-btn_group--grouped {
  gap: 0;
  grid-auto-flow: column;
}

/* Note: borders do not yet support logical props */

.tds-btn_group--grouped>.tds-btn {
  border-inline-end-width: 0;
  border-inline-start-width: 0;
  border-radius: 0;
}

.tds-btn_group--grouped>.tds-btn:first-child {
  border-inline-start-width: var(--tds-border-width--large);
  border-radius: var(--tds-btn--border-radius) 0 0 var(--tds-btn--border-radius);
}

.tds-btn_group--grouped>.tds-btn:last-child {
  border-inline-end-width: var(--tds-border-width--large);
}

.tds-btn_group--grouped>.tds-btn:last-child,[dir=rtl] .tds-btn_group--grouped>.tds-btn:first-child {
  border-radius: 0 var(--tds-btn--border-radius) var(--tds-btn--border-radius) 0;
}

[dir=rtl] .tds-btn_group--grouped>.tds-btn:last-child {
  border-radius: var(--tds-btn--border-radius) 0 0 var(--tds-btn--border-radius);
}

.tds-btn_group>.tds-link {
  justify-self: center;
}

/* For situations where a grouped button layout is inside form-layout or fieldset */

.tds-form-fieldset .tds-btn_group--grouped,.tds-form-layout .tds-btn_group--grouped {
  grid-auto-flow: row;
}

.tds-component-preview,:root {
  --tds-card--border-radius: var(--tds-border-radius--card);
  --tds-card--padding: var(--tds-padding--card);
}

.tds-card {
  --tds-card--cancel-padding: calc(var(--tds-card--padding)*-1);
  --tds-card--gap: var(--tds-card--padding);
  --tds-card--width: calc(75ch + var(--tds-padding--card--dense)*2);

  background-color: var(--tds-theme-background-container);
  block-size: -moz-min-content;
  block-size: min-content;
  border-radius: var(--tds-border-radius--card);
  display: flex;
  max-block-size: -moz-min-content;
  max-block-size: min-content;
  max-inline-size: var(--tds-card--width);
  overflow: hidden;
  transition: background-color .33s ease;
}

.tds-card-asset {
  align-items: center;
  display: flex;
  inline-size: 100%;
  justify-content: center;
}

.tds-card-body {

  /* Don't decrease to less than 24px. Min set by design to balance dense cards/status messages */
  -webkit-padding-end: max(var(--tds-size--3x), var(--tds-card--padding));
  flex-grow: 1;
  padding: var(--tds-card--padding);
          padding-inline-end: max(var(--tds-size--3x), var(--tds-card--padding));
}

.tds-card img {
  display: block;
  inline-size: 100%;
}

/* Note: locale selector headings depend on .tds-card override padding */

.tds-card :is(h1,h2,h3,h4,h5,h6,.tds-text--h1,.tds-text--h1-alt,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6,.tds-text--caption-header) {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}

:is(.tds-card,.tds-card--asset)>.tds-icon {
  -webkit-margin-after: var(--tds-card--padding);
  -webkit-margin-before: var(--tds-card--padding);
  -webkit-margin-start: var(--tds-card--padding);
          margin-block-end: var(--tds-card--padding);
          margin-block-start: var(--tds-card--padding);
          margin-inline-start: var(--tds-card--padding);
}

.tds-card>.tds-icon+.tds-card-body {
  -webkit-padding-before: calc(var(--tds-card--padding) + 2px);
  -webkit-padding-start: calc(var(--tds-card--padding)/3);
          padding-block-start: calc(var(--tds-card--padding) + 2px);
          padding-inline-start: calc(var(--tds-card--padding)/3);
}

.tds-card--highlighted {
  background-color: var(--tds-theme-background-dialog);
  box-shadow: var(--tds-box-shadow--medium);
}

.tds-card--layout-vertical {
  flex-direction: column;
}

.tds-card--layout-vertical>.tds-icon+.tds-card-body {
  -webkit-padding-before: calc(var(--tds-card--padding)/3);

  /* Remove min end-padding for vertical layouts */
  -webkit-padding-end: var(--tds-card--padding);
  -webkit-padding-start: var(--tds-card--padding);
          padding-block-start: calc(var(--tds-card--padding)/3);
          padding-inline-end: var(--tds-card--padding);
          padding-inline-start: var(--tds-card--padding);
}

/* Full-width variant of card -- Errant underscore classname that's currently in prod
 * TODO: Remove in v8 - AWSM-7050 */

/* Correct v8+ style */

.tds-card--full-width,.tds-card--full_width {
  --tds-card--width: 100%;
}

/* AWSM-4861 calls for cards on white scrims to be white  */

.tds-scrim--white .tds-card--highlighted {
  background-color: var(--tds-color-white);
}

.tds-card.tds-card--outline {
  background-color: transparent;
  border-color: var(--tds-theme-border-low-contrast);
  border-radius: var(--tds-border-radius--card);
  border-style: solid;
  border-width: var(--tds-border-width--hairline);
}

.tds-chip {
  --tds-chip--height: var(--tds-size--4x);
  -webkit-padding-end: var(--tds-size--half);
  -webkit-padding-start: var(--tds-size--2x);

  align-items: center;
  background-color: var(--tds-theme-background-container);
  block-size: var(--tds-chip--height);
  border-radius: var(--tds-border-radius--pill);
  display: inline-flex;
  font-weight: var(--tds-font-weight--medium);
  justify-content: space-between;
  margin: var(--tds-size--half);
  max-inline-size: 100%;
  overflow: hidden;
          padding-inline-end: var(--tds-size--half);
          padding-inline-start: var(--tds-size--2x);
}

.tds-density--dense .tds-chip {
  /* Adjust size to accommodate border width */
  --tds-chip--height: var(--tds-size--3x);

  font-size: var(--tds-font-size--20);
  line-height: var(--tds-size--4x);
}

.tds-chip--open {
  background-color: transparent;
}

.tds-form-input--inline .tds-chip--open {
  --tds-chip--height: var(--tds-size--3x);
  -webkit-padding-start: 0;

  margin: 0;
          padding-inline-start: 0;
}

.tds-form-input--default .tds-chip {
  --tds-chip--height: calc(var(--tds-height--pill) - var(--tds-size--1x));
  --tds-chip--inset: calc(var(--tds-form--indent) - var(--tds-size--half));
  -webkit-margin-after: calc(var(--tds-size--half)*-1);
  -webkit-margin-before: calc(var(--tds-size--half)*-1);
  -webkit-margin-end: var(--tds-size--half);
  -webkit-margin-start: 0;
  -webkit-padding-start: var(--tds-chip--inset);

  background-color: var(--tds-theme-background, var(--tds-color-white));
  border-radius: calc(var(--tds-border-radius--pill) - 2px);
  inline-size: -moz-max-content;
  inline-size: max-content;
          margin-block-end: calc(var(--tds-size--half)*-1);
          margin-block-start: calc(var(--tds-size--half)*-1);
          margin-inline-end: var(--tds-size--half);
          margin-inline-start: 0;
          padding-inline-start: var(--tds-chip--inset);
}

.tds-form-input--default .tds-chip:first-child {
  -webkit-margin-start: calc(var(--tds-chip--inset)*-1);
          margin-inline-start: calc(var(--tds-chip--inset)*-1);
}

.tds-form-input--default .tds-chip:last-child {
  -webkit-margin-end: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
}

.tds-form-input--default .tds-chip--open {
  background-color: transparent;
}

.tds-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Align visuals to a small icon-button, but set the size to be flexible
 * to keep it based on a concentric border-radius within the chip */

.tds-chip .tds-icon-btn {
  --tds-icon-btn--border-width: 1px;

  -webkit-margin-start: var(--tds-size--half);

          margin-inline-start: var(--tds-size--half);
}

/* stylelint-disable */

.tds-chip .tds-icon-btn,.tds-density--dense .tds-chip .tds-icon-btn,.tds-form-input--default .tds-chip .tds-icon-btn {
  block-size: calc(var(--tds-chip--height) - var(--tds-size--1x));
  inline-size: calc(var(--tds-chip--height) - var(--tds-size--1x));
}

.tds-chip-group {
  display: flex;
  gap: var(--tds-size--1x);
}

.tds-chip-group .tds-chip {
  margin: 0;
}

/******************************************************************************
Tesla Content Container

Simple containers that keep any content centered and "inset" among page flow.
Multiple sizes created for different needs, and when used consistently, will
create harmonious content flow.
******************************************************************************/

.tds-component-preview,:root {
  --tds-content_container--gutter: var(--tds-size--3x);
  --tds-content_container--inline-size: 100%;
  --tds-content_container--max_width: 100%;
}

/* Default at 100% width */

.tds-content_container {
  -webkit-margin-end: auto;
  -webkit-margin-start: auto;
  -webkit-padding-end: var(--tds-content_container--gutter);
  -webkit-padding-start: var(--tds-content_container--gutter);
  display: block;
  inline-size: var(--tds-content_container--inline-size);
          margin-inline-end: auto;
          margin-inline-start: auto;
  max-inline-size: var(--tds-content_container--max_width);
          padding-inline-end: var(--tds-content_container--gutter);
          padding-inline-start: var(--tds-content_container--gutter);
}

@media (min-width:600px) {
  :root {
    --tds-content_container--gutter: 36px;
  }
}

@media (min-width:1200px) {
  :root {
    --tds-content_container--gutter: var(--tds-size--6x);
  }
}

.tds-content_container--max_width {
  --tds-content_container--max_width: 1060px;
}

/******************************************************************************
 Size Modifiers - Small, Medium, and Large
******************************************************************************/

/* Containers adjusted when viewport is 900px wide or larger. */

@media (min-width:900px) {
  .tds-content_container--small {
    --tds-content_container--inline-size: 50%;
  }

  .tds-content_container--medium {
    --tds-content_container--inline-size: 70%;
  }

  .tds-content_container--extra-large,.tds-content_container--large {
    --tds-content_container--inline-size: 90%;
  }

  .tds-content_container--max_width.tds-content_container--small {
    --tds-content_container--max_width: 530px; /* 1060 * 0.5 */
  }

  .tds-content_container--max_width.tds-content_container--medium {
    --tds-content_container--max_width: 742px; /* 1060 * 0.7 */
  }

  .tds-content_container--max_width.tds-content_container--large {
    --tds-content_container--max_width: 954px; /* 1060 * 0.9 */
  }

  .tds-content_container--max_width.tds-content_container--extra-large {
    --tds-content_container--max_width: 1824px; /* special case for ultra-wide monitors popular w/ enterprise users */
  }
}

.context-block {
  left: var(--tds-context-block-position--left);
  position: absolute;
  top: var(--tds-context-block-position--top);
}

.tds-date-picker {
  /* Fixed grid layout, per design */
  --tds-date-picker--day-font-size: var(--tds-font-size--30);
  --tds-date-picker--day-size: var(--tds-size--5x);
  --tds-date-picker--grid-size: 327px;
  --tds-date-picker--label-font-size: var(--tds-font-size--50);
  --tds-date-selected--color: var(--tds-color-white);
  --tds-day-radius: var(--tds-size--half);
  --tds-end-of-week-radius: var(--tds-size--half);

  inline-size: var(--tds-date-picker--grid-size);
}

.tds-density--dense .tds-date-picker {
  --tds-date-picker--day-font-size: var(--tds-font-size--20);
  --tds-date-picker--day-size: var(--tds-size--4x);
  --tds-date-picker--label-font-size: var(--tds-font-size--30);

  /* Adjust to fit picker inside a tooltip (3x padding x2 sides) */
  inline-size: calc(var(--tds-date-picker--grid-size) - var(--tds-size--3x)*2);
}

.tds-date-picker--range {
  --tds-date-picker--grid-gap: var(--tds-size--6x);

  display: flex;
  flex-wrap: wrap;
  gap: var(--tds-size--2x) var(--tds-date-picker--grid-gap);
  position: relative;
}

.tds-date-picker--range.tds-date-picker--horizontal {
  /* Size horizontal space to 2 grids + gap */
  inline-size: calc(var(--tds-date-picker--grid-size)*2 + var(--tds-date-picker--grid-gap));
}

.tds-date-picker-calendar {
  --tds-column-count: 7;

  flex-grow: 1;
}

.tds-date-picker-month {
  align-items: center;
  display: flex;
  flex-grow: 1;
  inline-size: 100%;
  min-block-size: var(--tds-date-picker--day-size);
}

.tds-date-picker-month:focus {
  border-radius: var(--tds-size--half);
}

.tds-date-picker-month button {
  align-items: center;
  align-self: stretch;
  display: flex;
  min-inline-size: calc(var(--tds-date-picker--day-size)*1.5);
  z-index: 1;
}

.tds-date-picker-month button:first-child {
  justify-content: flex-end;
}

.tds-date-picker-month button:last-child {
  justify-content: flex-start;
}

.tds-date-picker-month label {
  flex-grow: 1;
  font-size: var(--tds-date-picker--label-font-size);
  font-weight: var(--tds-font-weight--medium);
  padding: 0;
  text-align: center;
}

.tds-date-picker-month button:not(:hover) .tds-icon {
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-date-picker-days-grid,.tds-date-picker-days-label {
  align-items: center;
  display: grid;
  gap: var(--tds-size--half) 0;
  grid-template-columns: repeat(var(--tds-column-count, 7), 1fr);
  margin: var(--tds-size--1x) 0;
}

.tds-date-picker-days-label {
  pointer-events: none;
}

/* Days */

.tds-day {
  cursor: pointer;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.tds-day--not-this-month {
  pointer-events: none;
  visibility: hidden;
}

/* span is used to create the circle for a date */

.tds-day span {
  align-items: center;
  block-size: var(--tds-date-picker--day-size);
  border-radius: var(--tds-day-radius);
  display: flex;
  font-size: var(--tds-date-picker--day-font-size);
  inline-size: var(--tds-date-picker--day-size);
  justify-content: center;
  outline-offset: 2px;
}

.tds-day--today span {
  border: 1px solid var(--tds-theme-border);
}

.tds-day[disabled] {
  color: var(--tds-color-grey-30);
  font-weight: var(--tds-font-weight--book);
}

/* stylelint-disable */

/* stylelint treats the :where selector like a higher specificity than it really is */

.tds-day:where(:hover,.tds-day--highlighted:not(.tds-day--between)) span {
  background-color: var(--tds-theme-background-container);
  border: none;
}

.tds-day--selected:not(.tds-day--between) span {
  background-color: var(--tds-theme-primary);
}

.tds-day--selected:hover span {
  background-color: var(--tds-theme-primary-highlight);
}

.tds-day--selected span {
  border: none;
  color: var(--tds-date-selected--color);
  font-weight: var(--tds-font-weight--medium);
  outline-offset: 2px;
  transition: background-color .3s ease,color .3s ease;
}

/* ::before is used to create the semi-rectangular background/link shape */

.tds-day:before {
  background-color: var(--tds-theme-background);
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
}

/* Display focus on the inner (circular) element instead of the button,
 * as the button has extra tap-target space */

.tds-date-picker-days-grid button:focus-visible {
  outline: none;
}

.tds--indicate-focus .tds-date-picker-days-grid button:focus {
  outline: none;
}

.tds-date-picker-days-grid button:focus-visible span {
  outline: var(--tds-outline--focus);
}

.tds--indicate-focus .tds-date-picker-days-grid button:focus span {
  outline: var(--tds-outline--focus);
}

/* Bump out the focus ring for selected days */

.tds-date-picker-days-grid .tds-day--selected:focus-visible span {
  outline-offset: 2px;
}

.tds--indicate-focus .tds-date-picker-days-grid .tds-day--selected:focus span {
  outline-offset: 2px;
}

/* Tooltip */

.tds-tooltip.tds-date-picker-tooltip {
  inline-size: var(--tds-date-picker--grid-size);
}

.tds-tooltip.tds-date-range-picker-tooltip {
  max-inline-size: calc(100vw - 48px);
}

.tds-date-picker--selected .tds-day--selected:before {
  background-color: var(--tds-theme-primary);
  color: var(--tds-color-white);
  font-weight: var(--tds-font-weight--medium);
  transition: background-color .3s ease,color .3s ease;
}

.tds-date-picker--hovering .tds-day--highlighted:before,.tds-date-picker--hovering:not(.tds-date-picker--selected) .tds-day--selected:not(:hover):not(:hover~.tds-day--selected):before {
  background-color: var(--tds-theme-background-container);
}

/* TODO: Convert to logical props when available in Safari: AWSM-4496 */

.tds-day--last:before,.tds-day:nth-child(7n):before {
  border-bottom-right-radius: var(--tds-end-of-week-radius);
  border-top-right-radius: var(--tds-end-of-week-radius);
}

.tds-day--first:before,.tds-day:nth-child(7n+1):before {
  border-bottom-left-radius: var(--tds-end-of-week-radius);
  border-top-left-radius: var(--tds-end-of-week-radius);
}

[dir=rtl] .tds-day--last:before,[dir=rtl] .tds-day:nth-child(7n):before {
  border-bottom-left-radius: var(--tds-end-of-week-radius);
  border-radius: 0;
  border-top-left-radius: var(--tds-end-of-week-radius);
}

[dir=rtl] .tds-day--first:before,[dir=rtl] .tds-day:nth-child(7n+1):before {
  border-bottom-right-radius: var(--tds-end-of-week-radius);
  border-radius: 0;
  border-top-right-radius: var(--tds-end-of-week-radius);
}

.tds-day--start:not(.tds-day--highlighted~.tds-day--start):before {
  left: 50%;
  right: 0;
}

.tds-day--between:before {
  left: 0;
  right: 0;
}

.tds-day--end:before,.tds-day--highlighted:not(.tds-day--between):before,[dir=rtl] .tds-day--start:not(.tds-day--highlighted~.tds-day--start):before {
  left: 0;
  right: 50%;
}

[dir=rtl] .tds-day--end:before,[dir=rtl] .tds-day--highlighted:not(.tds-day--between):before {
  left: 50%;
  right: 0;
}

.tds-day--start.tds-day--end:before {
  display: none;
}

.tds-day--error span {
  background-color: transparent;
  box-shadow: inset 0 0 0 3px var(--tds-color-red-10);
  color: inherit;
}

.tds-figure {
  --tds-figure--padding: var(--tds-padding--card);
  --tds-figure--radius: var(--tds-border-radius--card);

  block-size: -moz-min-content;

  block-size: min-content;
  display: flex;
  max-block-size: -moz-min-content;
  max-block-size: min-content;
  max-inline-size: var(--tds-figure--width);
  overflow: hidden;
  padding: 0;
  transition: background-color .33s ease;
}

.tds-figure img {
  border-radius: var(--tds-figure--radius);
  inline-size: 100%;
}

.tds-density--dense .tds-figure {
  --tds-figure--padding: var(--tds-padding--card--dense);
  --tds-figure--radius: var(--tds-border-radius--card--dense);
}

.tds-figure>.tds-card-body {
  padding: 0;
}

.tds-figure--layout-vertical>figcaption+img,.tds-figure--layout-vertical>img+figcaption {
  -webkit-margin-before: var(--tds-figure--padding);
          margin-block-start: var(--tds-figure--padding);
}

.tds-figure--layout-vertical>.tds-icon+figcaption,.tds-figure--layout-vertical>figcaption+.tds-icon {
  -webkit-margin-before: calc(var(--tds-figure--padding)/3);
          margin-block-start: calc(var(--tds-figure--padding)/3);
}

.tds-figure:not(.tds-figure--layout-vertical)>figcaption+img,.tds-figure:not(.tds-figure--layout-vertical)>img+figcaption {
  -webkit-margin-start: var(--tds-figure--padding);
          margin-inline-start: var(--tds-figure--padding);
}

.tds-figure:not(.tds-figure--layout-vertical)>.tds-icon+figcaption,.tds-figure:not(.tds-figure--layout-vertical)>figcaption+.tds-icon {
  -webkit-margin-start: calc(var(--tds-figure--padding)/3);
          margin-inline-start: calc(var(--tds-figure--padding)/3);
}

.tds-figure--layout-vertical {
  flex-direction: column;
}

/* Note: locale selector headings depend on .tds-figure override padding */

.tds-figure :is(h1,h2,h3,h4,h5,h6,.tds-text--h1,.tds-text--h1-alt,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6,.tds-text--caption-header) {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}

/**
 * Form - General Styles & Modifiers
 */

/* Indentation */

.tds-form--indent {
  --tds-form--indent: 12px;
}

.tds-density--dense .tds-form--indent {
  --tds-form--indent: var(--tds-size--2x);
}

.tds-form--outdent {
  --tds-form--indent: 0;
}

/* States */

.tds-form--error {
  --tds-form-feedback--color: var(--tds-theme-secondary-negative);
  --tds-form-input--border-color: var(--tds-theme-secondary-negative);
}

/* stylelint-disable */

/* Align to v6 baseline, TODO: remove this after clean baseline */

.tds-density--default {
  --tds-form--indent: 4px;
}

.tds-density--default.tds-form--indent {
  --tds-form--indent: 12px;
}

.tds-density--dense.tds-form--indent {
  --tds-form--indent: 10px;
}

.tds-density--default.tds-form--outdent,.tds-density--dense.tds-form--outdent {
  --tds-form--indent: 0;
}

.tds-theme--v6 .tds-density--default {
  --tds-form--indent: 20px;
}

.tds-theme--v6 [class*=tds-density--].tds-form--outdent {
  --tds-form--indent: 0;
}

/**
 * Form Fieldset
 */

.tds-form-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Form Layout & Fieldset share default grid styles
 * - Shared layout styles, separate semantics/concept
 */

.tds-form-fieldset,.tds-form-layout {
  display: grid;
  gap: var(--tds-form--gap);
}

.tds-form-layout--horizontal {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tds-form-layout--2col {
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}

.tds-form-fieldset>:is(legend,.tds-text--h3,.tds-text--h4,.tds-text--h5) {
  -webkit-padding-start: var(--tds-form--indent);
          padding-inline-start: var(--tds-form--indent);
}

/**
 * Form Item
 */

/* TODO: Do we even need anything else here? */

fieldset.tds-form-item {
  border: 0;
  margin: 0;
  min-inline-size: auto;
  padding: 0;
}

/* This is for the case when we have a tooltip inside
a form item that is not in a label (eg, triggered by the
input focus). This gives the form item position relative
but not display flex */

.tds-form-item.tds-tooltip-wrapper {
  display: inherit;
}

/**
 * Form Input
 */

/* Grid for laying out multiple inputs within an item (or any container) */

.tds-form-input-group {
  display: flex;
  flex-direction: column;
}

/*
 * Layout
 * Note: This uses the flex spec instead of grid because
 * there's frequent call to have horizontally aligned options
 * flow off the container & scroll, rather than wrapping
 */

.tds-form-input-group--layout-horizontal {
  -webkit-margin-after: -12px;
  -webkit-margin-before: -4px;
  -webkit-margin-end: -4px;
  -webkit-padding-after: 12px;
  -webkit-padding-before: 4px;
  -webkit-padding-end: 4px;
  flex-direction: row;
          margin-block-end: -12px;
          margin-block-start: -4px;
          margin-inline-end: -4px;
  overflow-x: auto;
          padding-block-end: 12px;
          padding-block-start: 4px;
          padding-inline-end: 4px;
}

/* Wrap a standalone input element */

.tds-form-input {
  align-items: center;
  border-radius: var(--tds-border-radius--outline-only);
  display: flex;
  font-size: var(--tds-form-input--font-size, inherit);
  position: relative;
  transition: color .33s ease,background-color .33s ease,box-shadow .33s ease;
}

/* Bump font size for inputs to 16px to prevent iOS from zooming in when a user taps into it */

@media (max-width:599px) {
  .tds-form-input--default,.tds-form-input--option {
    --tds-form-input--font-size: 16px;
  }
}

.tds-form-input :-moz-placeholder-shown,.tds-form-input:-moz-placeholder-shown {
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-form-input :placeholder-shown,.tds-form-input.tds-form-input--readonly input,.tds-form-input:placeholder-shown,.tds-placeholder {
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-placeholder {
  font-weight: var(--tds-font-weight--medium);
  white-space: nowrap;
}

:is(.tds-form-label,.tds-form-caption,.tds-form-feedback)+:is(.tds-form-input,.tds-form-input-group) {
  -webkit-margin-before: var(--tds-size--1x);
          margin-block-start: var(--tds-size--1x);
}

/* Horizontal adds extra padding to account for scrolling */

:is(.tds-form-label,.tds-form-caption,.tds-form-feedback)+.tds-form-input-group--layout-horizontal {
  -webkit-margin-before: var(--tds-size--half);
          margin-block-start: var(--tds-size--half);
}

/* Variants */

.tds-form-input--inline {
  display: inline-flex;
  vertical-align: baseline;
}

.tds-form-input--default {
  --tds-form--indent: 12px;

  background-color: var(--tds-theme-background-container);
  block-size: auto;
  border-radius: var(--tds-border-radius--pill);
  box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px) var(--tds-form-input--border-color, var(--tds-theme-background-container));
  inline-size: var(--tds-form-input--inline-size, 100%);
  justify-content: space-between;
  min-block-size: var(--tds-height--pill);
  outline-offset: 2px;
  padding: 0 var(--tds-form--indent);
  transition: inline-size .5s var(--tds-bezier), padding .5s var(--tds-bezier), background-color .5s var(--tds-bezier), box-shadow .5s var(--tds-bezier);
}

/* Because of the reset at the --default component level, we have to manually set
 * density here again */

.tds-density--dense .tds-form-input--default {
  --tds-form--indent: 10px;
}

.tds-density--default .tds-form-input--default {
  --tds-form--indent: 12px;
}

/* When inside cards, the backgrounds for form elements should be offset from the card instead of from the scrim */

.tds-card:not(.tds-card--outline,.tds-scrim--white .tds-card--highlighted) .tds-form-input--default {
  --tds-form-input--border-color: var(--tds-theme-background);

  background-color: var(--tds-theme-background);
}

.tds-form-input--default.tds-form-input--readonly {
  --tds-form-input--border-color: var(--tds-theme-border);

  background: none;
}

/* Cursor style for non-text inputs
 * - Doing `cursor: pointer` as a progressive enhancement
 * https: //caniuse.com/?search=%3Ahas
 * - Safari 15+
 * - Chrome 105+
 * - FF - ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=418039
 */

.tds-form-input:has(.tds-form-input-dropdown,.tds-form-input-select):not(.tds--disabled) {
  cursor: pointer;
}

/* States */

/* stylelint-disable */

.tds-card .tds-form-input--default:focus-within,.tds-form-input--default:focus-within {
  --tds-form-input--border-color: var(--tds-theme-border);
  --tds-form-input--border-width: 1px;
}

/* JS required here, as there's no :focus-visible-within selector */

.tds--indicate-focus .tds-form-input--default:focus-within {
  /* Don't show the mouse-style focus indicator (reduces "bullseye effect") */ /* :not(.tds-form-input-choice) */
  --tds-form-input--border-color: var(--tds-theme-background-container);

  outline: var(--tds-outline--focus);
}

/* Prevent duplicate focus indication if focused element is within a drodpown */

.tds--indicate-focus .tds-form-input:has(.tds-dropdown :focus) {
  --tds-form-input--border-color: var(--tds-theme-background-container);

  outline: none;
}

/* Special state, where the input is collapsed into a circle to appear as an icon-button,
 * leaving room for one icon in the leading slot */

.tds-form-input--collapsed {
  --tds-form-input--border-color: transparent;
  -webkit-padding-start: var(--tds-form-input--collapsed-padding-inline-start);

  background-color: transparent;
  cursor: pointer;
  inline-size: var(--tds-form-input--collapsed-inline-size);
          padding-inline-start: var(--tds-form-input--collapsed-padding-inline-start);
}

.tds-form-input--collapsed:is(.tds-form-input--highlighted,:hover) {
  background-color: var(--tds-theme-background-container);
}

.tds-form-input--collapsed.tds-form-input--highlighted:hover {
  background-color: var(--tds-color--tertiary-highlight);
}

/* When in a group, fake a flex-gap & wait for Safari 14.0 to go away */

.tds-form-input-group>.tds-form-input:not(:last-child) {
  -webkit-margin-after: var(--tds-size--1x);
          margin-block-end: var(--tds-size--1x);
}

.tds-form-input-group--layout-horizontal>.tds-form-input {
  max-inline-size: calc(100% - var(--tds-size--6x));
  min-inline-size: -moz-min-content;
  min-inline-size: min-content;
}

.tds-form-input-group--layout-horizontal>.tds-form-input:not(:last-child) {
  -webkit-margin-after: 0;
  -webkit-margin-end: var(--tds-size--2x);
          margin-block-end: 0;
          margin-inline-end: var(--tds-size--2x);
}

/* Leading & Trailing slots */

.tds-form-input-leading {
  -webkit-padding-end: var(--tds-size--half);
  /* This max size is non-ideal, but currently necessary due to quirks
   * in the behavior of text-overflow + flex containers - outlined in AWSM-7243
   * TODO: This issue should be obviated in v8 by AWSM-7247,
   * after completing that ticket, remove this width hack */
  max-inline-size: calc(100% - 20px);
          padding-inline-end: var(--tds-size--half);
}

.tds-form-input-trailing {
  -webkit-padding-start: var(--tds-size--half);
          padding-inline-start: var(--tds-size--half);
}

.tds-form-input-leading+.tds-form-input-trailing {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}

.tds-form-input-group--layout-horizontal .tds-form-input-leading+.tds-form-input-trailing {
  -webkit-padding-start: var(--tds-size--2x);
          padding-inline-start: var(--tds-size--2x);
}

.tds-form-input--default :where(.tds-form-input-leading,.tds-form-input-trailing) {
  align-items: center;
  display: flex;
  inline-size: -moz-max-content;
  inline-size: max-content;
}

:is(.tds-form-input--default,.tds-listbox-search) :where(.tds-form-input-leading,.tds-form-input-trailing) {
  -webkit-padding-after: var(--tds-size--half);
  -webkit-padding-before: var(--tds-size--half);
          padding-block-end: var(--tds-size--half);
          padding-block-start: var(--tds-size--half);
}

/* Basic image/asset support */

.tds-form-input img {
  block-size: 100%;
  border-radius: inherit;
  inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

/* Align to v6 baseline, TODO: remove this after clean baseline

// TODO: question for draft PR:  were these ready to be removed anyway?
// I couldn't get a clear picture of what they were doing, other than
// the V6 class, which I updated below.

.tds-density--dense .tds-form-input--default {
  --tds-form--indent: 20px;
}

.tds-density--dense.tds-form--indent .tds-form-input--default {
  --tds-form--indent: 16px;
}

.tds-density--dense.tds-form--outdent .tds-form-input--default {
  --tds-form--indent: 16px;
}

.tds-theme--v6 .tds-density--dense .tds-form-input--default {
  --tds-form--indent: 16px;
}
*/

/* These are used for the "An Overloaded Form" dense and indent examples
of the v6 in v7 theme */

.tds-theme--v6 .tds-form--indent {
  --tds-form--indent: 20px;
}

.tds-theme--v6 .tds-density--dense .tds-form-input--default,.tds-theme--v6 .tds-density--dense.tds-form--indent .tds-theme--v6 .tds-density--dense .tds-form--indent {
  --tds-form--indent: var(--tds-size--2x);
}

.tds-theme--v6 .tds-form-input--default {
  --tds-form--indent: 20px;
}

/**
 * Form Input Choice
 */

.tds-form-input-choice {
  align-self: normal;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: inset 0 0 0 1px var(--tds-form-input--border-color, var(--tds-theme-foreground-low-contrast));
  color: inherit;
  cursor: pointer;
  display: inline-flex;

  /* Height set via min/max to ensure flex doesn't squish them */
  max-block-size: var(--tds-height--choice);
  max-inline-size: var(--tds-height--choice);
  min-block-size: var(--tds-height--choice);
  min-inline-size: var(--tds-height--choice);
  transition: box-shadow .33s var(--tds-bezier);

  /* When standalone, radios and checkboxes have different baseline vertical alignments */
  vertical-align: middle;
}

.tds-form-input-choice:focus {
  box-shadow: inset 0 0 0 2px var(--tds-form-input--border-color, var(--tds-theme-foreground-high-contrast));
}

.tds-form-input-choice[type=checkbox] {
  --tds-form-input-choice--fill-size: var(--tds-form-input-choice--check-size);

  border-radius: 2px;
}

.tds-form-input-choice[type=radio] {
  --tds-form-input-choice--fill-size: var(--tds-form-input-choice--radio-size);

  border-radius: calc(var(--tds-height--choice)/2);
}

.tds-form-input-choice:after {
  block-size: var(--tds-form-input-choice--fill-size);
  content: "";
  display: block;
  inline-size: var(--tds-form-input-choice--fill-size);
  margin: auto;
  transform: scale(0);
  transition: transform .33s var(--tds-bezier);
}

.tds-form-input-choice:checked:after {
  transform: scale(1);
}

.tds-form-input-choice[type=checkbox]:after {
  background-image: var(--tds-background-image--check);
}

/* Per the HTML Spec, `indeterminate` must be set via js for it to work
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate */

.tds-form-input-choice[type=checkbox]:indeterminate:after {
  background-image: var(--tds-background-image--minus);
  transform: scale(1);
}

.tds-form-input-choice[type=radio]:after {
  background-color: currentColor;
  border-radius: inherit;
}

/* Layout */

/* stylelint-disable */

:is(:root,.tds-density--default) .tds-form-input-group .tds-form-input-choice {
  -webkit-margin-before: var(--tds-size--1x);
          margin-block-start: var(--tds-size--1x);
}

:is(.tds-theme--replicant,.tds-density--dense) .tds-form-input-group .tds-form-input-choice {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}

.tds-form-input-group--layout-horizontal .tds-form-input:first-child .tds-form-input-choice,.tds-form-item .tds-form-input-choice {
  -webkit-margin-start: var(--tds-form--indent);
          margin-inline-start: var(--tds-form--indent);
}

.tds-form-input-group--layout-horizontal .tds-form-input:not(:first-child) .tds-form-input-choice {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}

/* Label */

.tds-form-input-choice-label {
  --tds-form--indent: var(--tds-size--1x);
  -webkit-padding-before: 2px;

  align-self: normal;
          padding-block-start: 2px;
}

:is(:root,.tds-density--default) .tds-form-input-group .tds-form-input-choice+.tds-form-input-choice-label {
  -webkit-margin-before: var(--tds-size--1x);
          margin-block-start: var(--tds-size--1x);
}

/* Adustment to get an 8px gap between choices while preserving line-height,
whether in a form group or if the input is by itself */

:is(.tds-theme--replicant,.tds-density--dense) :is(.tds-form-input-group .tds-form-input-choice,.tds-form-input-choice)+.tds-form-input-choice-label {
  -webkit-margin-before: -4px;
          margin-block-start: -4px;
}

.tds-form-input-choice-label label[for] {
  cursor: pointer;
}

.tds-form-input-choice+.tds-form-input-choice-label:hover .tds-form-label,.tds-form-input-choice:checked+.tds-form-input-choice-label .tds-form-label,.tds-form-input-choice:hover+.tds-form-input-choice-label .tds-form-label {
  color: var(--tds-theme-foreground-high-contrast);
}

/**
 * Form Input Dropdown
 */

.tds-form-input-dropdown {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: var(--tds-border-radius--outline-only);
  color: inherit;
  cursor: pointer;
  flex-grow: 1;
  font-weight: var(--tds-font-weight--medium);

  /* The value of the input isn't usually what should be displayed to the user */
  inline-size: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  text-overflow: ellipsis;
}

.tds-form-input-dropdown:disabled {
  opacity: 0;
}

.tds-form-input-dropdown:focus {
  outline: none;
}

.tds-form-input--inline .tds-form-input-dropdown+.tds-form-input-trailing {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

/* Dropdown-specific tweaks for tooltips */

.tds-dropdown.tds-tooltip {
  --tds-tooltip--padding: var(--tds-form--indent);

  cursor: default;

  /* Internal padding handled by listbox */
  padding: 0;
}

.tds-form-input--inline .tds-dropdown.tds-tooltip {
  --tds-form--indent: var(--tds-size--2x);
  --tds-tooltip--padding: var(--tds-form--indent);
}

/* Trigger styles (TODO: maybe redundant) */

.tds-dropdown-trigger {

  /* Hacky offset - balances the focus-indication visually when keyboarding */
  -webkit-margin-start: calc(var(--tds-size--half)*-1);
  -webkit-padding-start: var(--tds-size--half);
  align-items: center;
  display: flex;
  font-weight: var(--tds-font-weight--medium);
          margin-inline-start: calc(var(--tds-size--half)*-1);
          padding-inline-start: var(--tds-size--half);
  white-space: nowrap;
}

.tds-form-input-leading .tds-dropdown-trigger {
  -webkit-padding-end: var(--tds-size--half);
          padding-inline-end: var(--tds-size--half);
}

/**
 * Form Input File Upload
 */

.tds-form-label-files {
  -webkit-padding-end: var(--tds-form--indent);
  -webkit-padding-start: var(--tds-form--indent);
          padding-inline-end: var(--tds-form--indent);
          padding-inline-start: var(--tds-form--indent);
}

.tds-list-item--file {
  align-items: center;
  color: var(--tds-theme-foreground);
  display: flex;
  justify-content: space-between;
  max-inline-size: unset;
}

:is(.tds-form-label,.tds-form-caption)+.tds-form-label-files .tds-list-item--file:first-of-type {
  -webkit-padding-before: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
}

.tds-list-item--file>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tds-list-item--file>button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tds-list-item--file>button .tds-icon {
  margin: 0;
}

/* Outdent feedback to place icon in empty space */

.tds-form-feedback.tds-form-feedback-file {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.tds-form-feedback-file .tds-form-feedback-text {
  display: flex;
}

.tds-form-feedback-file .tds-form-feedback-text .tds-icon {
  -webkit-margin-before: calc(var(--tds-size--1x)/4);
  -webkit-margin-end: var(--tds-size--half);
          margin-block-start: calc(var(--tds-size--1x)/4);
          margin-inline-end: var(--tds-size--half);
}

/* Input (hidden) */

.tds-form-input-file-upload {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.tds-form-input-file-upload[disabled]+.tds-btn {
  cursor: not-allowed;
  opacity: var(--tds-ui-opacity-50);
}

.tds-form-input-file-upload:not([disabled]):focus+.tds-btn {
  box-shadow: inset 0 0 0 var(--tds-border-width--medium);
  outline: none;
}

.tds-form-input-file-upload:focus {
  outline: none;
}

/**
 * Form Input Password
 */

.tds-form-input-password {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: var(--tds-border-radius--outline-only);
  color: inherit;
  font-weight: var(--tds-font-weight--medium);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
}

.tds-form-input-password:focus {
  outline: none;
}

/**
 * Form Input Range
 * - NOTE: Some intentional overlap in browser-specific styles
 */

.tds-form-input-range {
  --tds-form-input-range--thumb-size: var(--tds-height--choice);
  --tds-form-input-range--track-size: calc(var(--tds-height--choice)/2);
  --tds-form-input-range--track-radius: calc(var(--tds-form-input-range--track-size)/2);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  background-color: transparent;
  color: inherit;
  cursor: ew-resize;
  inline-size: 100%;
  margin: var(--tds-size--half) var(--tds-form--indent);
}

/* Progress */

.tds-form-input-range--progress {
  position: relative;
}

.tds-form-input-range:focus {
  outline: none;
}

.tds-form-input-range--progress:before {
  background-color: var(--tds-theme-primary);
  block-size: 100%;
  border-radius: var(--tds-size--1x);
  content: "";
  display: block;
  inline-size: var(--tds-form-input-range--progress-width, 100%);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
}

[dir=rtl] .tds-form-input-range--progress:before {
  left: auto;
  right: 0;
}

/* This is messy, but they can't combined because Safari's pseudo selector
   can't be combined with anything or else it won't work... when we have
   a cleaner standard, this whole file will be updated (again).
 */

.tds-form-input-range--progress::-moz-range-progress {
  background-color: var(--tds-theme-primary);
  block-size: var(--tds-form-input-range--track-size);
  border-radius: var(--tds-form-input-range--track-radius);
}

/* Track */

.tds-form-input-range::-webkit-slider-runnable-track {
  background-color: var(--tds-color-grey-50);
  block-size: var(--tds-form-input-range--track-size);
  border-radius: var(--tds-form-input-range--track-radius);
  inline-size: 100%;
}

.tds-form-input-range::-moz-range-track {
  -moz-appearance: none;
       appearance: none;
  background-color: var(--tds-color-grey-50);
  block-size: var(--tds-form-input-range--track-size);
  border: none;
  border-radius: var(--tds-form-input-range--track-radius);
  inline-size: 100%;
}

/* Thumb */

.tds-form-input-range::-webkit-slider-thumb {
  -webkit-margin-before: calc(var(--tds-form-input-range--track-size)/2 - var(--tds-form-input-range--thumb-size)/2);
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--tds-color-white);
  block-size: var(--tds-form-input-range--thumb-size);
  border-radius: calc(var(--tds-form-input-range--thumb-size)/2);
  box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px) var(--tds-form-input--border-color, var(--tds-theme-border)), var(--tds-range-slider--box-shadow, 0 0 0 0 transparent), var(--tds-box-shadow--small);
  inline-size: var(--tds-form-input-range--thumb-size);
          margin-block-start: calc(var(--tds-form-input-range--track-size)/2 - var(--tds-form-input-range--thumb-size)/2);
  outline: var(--tds-range-slider--outline, none);
  outline-offset: 2px;
  position: relative;
  -webkit-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
}

.tds--indicate-focus ::-webkit-slider-thumb {
  -webkit-transition: none;
  transition: none;
}

/* Due to webkit-shadow-dom handling, outlines have to be passed down as a custom prop,
 * otherwise focus is not registered */

.tds-form-input-range:focus-visible {
  --tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
  --tds-form-input--border-width: 2px;
  --tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
  --tds-range-slider--outline: var(--tds-outline--focus);
}

.tds--indicate-focus .tds-form-input-range:focus {
  --tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
  --tds-form-input--border-width: 2px;
  --tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
  --tds-range-slider--outline: var(--tds-outline--focus);
}

.tds-form-input-range::-moz-range-thumb {
  -moz-appearance: none;
       appearance: none;
  background-color: var(--tds-color-white);
  block-size: var(--tds-form-input-range--thumb-size);
  border: none;
  border-radius: calc(var(--tds-form-input-range--thumb-size)/2);
  box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px) var(--tds-form-input--border-color, var(--tds-theme-border)), var(--tds-range-slider--box-shadow, 0 0 0 0 transparent), var(--tds-box-shadow--small);
  inline-size: var(--tds-form-input-range--thumb-size);
  margin-block-start: calc(var(--tds-form-input-range--track-size)/2 - var(--tds-form-input-range--thumb-size)/2);
  outline: var(--tds-range-slider--outline, none);
  outline-offset: 2px;
  -moz-transition: box-shadow .3s ease;
  transition: box-shadow .3s ease;
  z-index: 2;
}

.tds--indicate-focus ::-moz-range-thumb {
  -moz-transition: none;
  transition: none;
}

.tds-form-input-range:focus-visible ::-moz-range-thumb {
  --tds-form-input--border-color: var(--tds-theme-foreground-low-contrast);
  --tds-form-input--border-width: 2px;
  --tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
  --tds-range-slider--outline: var(--tds-outline--focus);
}

.tds--indicate-focus .tds-form-input-range:focus ::-moz-range-thumb {
  --tds-form-input--border-color: var(--tds-theme-foreground-low-contrast);
  --tds-form-input--border-width: 2px;
  --tds-range-slider--box-shadow: 0 0 0 2px var(--tds-theme-background);
  --tds-range-slider--outline: var(--tds-outline--focus);
}

/* Label Styles - possibly make this it's own component? */

.tds-form-label-range.tds-form-label-range {
  align-items: baseline;
  display: flex;
}

.tds-form-label-range .tds-form-caption {
  flex-grow: 1;
  text-align: end;
}

/**
 * Form Input Select
 */

.tds-form-input-select {
  -webkit-padding-end: var(--tds-size--3x);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: inherit;
  border: none;
  border-radius: var(--tds-border-radius--outline-only);
  color: inherit;
  flex-grow: 1;
  font-weight: var(--tds-font-weight--medium);
  inline-size: 100%;
  margin: 0;
  padding: 0;
          padding-inline-end: var(--tds-size--3x);
  text-overflow: ellipsis;
}

.tds-form-input--default {
  --tds-form-input-select--chevron-inset: var(--tds-form--indent);
}

.tds-form-input-select:focus {
  outline: none;
}

.tds-form-input-select+.tds-form-input-trailing {
  align-self: center;
  left: auto;
  pointer-events: none;
  position: absolute;
  right: var(--tds-form-input-select--chevron-inset, 0);
}

[dir=rtl] .tds-form-input-select+.tds-form-input-trailing {
  left: var(--tds-form-input-select--chevron-inset, 0);
  position: absolute;
  right: auto;
}

/**
 * Form Input Search
 */

.tds-form-input-search {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: var(--tds-border-radius--outline-only);
  color: inherit;
  flex-grow: 1;
  font-weight: var(--tds-font-weight--medium);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  transition: opacity .33s ease;
}

/* If collapsed, make sure the text of the input is hidden
 * - opacity only, as users should still be able to focus into the input to expand it */

.tds-form-input--collapsed .tds-form-input-search {
  opacity: 0;
}

.tds-form-input-search:focus {
  outline: none;
}

/* Hide webkit default clear button and datalist down arrow indicator
 * - Note: datalist down arrow is listed as a calendar picker in webkit browsers
 */

.tds-form-input-search:is([inputmode=search],[type=search])::-webkit-calendar-picker-indicator,.tds-form-input-search:is([inputmode=search],[type=search])::-webkit-search-cancel-button {
  display: none !important;
}

/* Only show the clear button if the input has a value in it */

.tds-form-input-search-clear {
  opacity: 0;
  pointer-events: none;
  transition: opacity .33s ease,background-color .33s ease,visibility 0s .33s;
  visibility: hidden;
}

.tds-form-input:not(.tds-form-input--collapsed)[data-tds-value] .tds-form-input-search-clear {
  opacity: 1;
  pointer-events: inherit;
  transition: opacity .33s ease,background-color .33s ease,visibility 0s 0s;
  visibility: inherit;
}

/**
 * Form Input Option
 */

/* Overrides for label element */

label.tds-form-input {
  color: var(--tds-form-label--color);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Encapsulation class */

.tds-form-input--option {
  --tds-form--indent: 20px;

  align-items: center;
  block-size: auto;
  border-radius: var(--tds-border-radius--pill);
  box-shadow: inset 0 0 0 var(--tds-form-input--border-width, 1px) var(--tds-form-input--border-color, var(--tds-theme-border));
  inline-size: auto;
  justify-content: space-between;
  min-block-size: var(--tds-height--pill);

  /* stylelint-disable-next-line liberty/use-logical-spec */
  padding: var(--tds-size--half) var(--tds-form--indent);
}

.tds-density--dense .tds-form-input--option {
  --tds-form--indent: var(--tds-size--2x);
}

.tds-form-input--option.tds-form-input--circle,.tds-form-input-group--layout-horizontal>.tds-form-input--option.tds-form-input--circle {
  border-radius: var(--tds-border-radius--circle);
  justify-content: center;
  max-block-size: var(--tds-height--pill);
  max-inline-size: var(--tds-height--pill);
  min-inline-size: var(--tds-height--pill);
  padding: var(--tds-size--1x);
}

/* Hide the structural radio/checkbox so we can use it to manipulate the whole choice input */

input.tds-form-input-hidden-choice {
  block-size: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  inline-size: 0;
  opacity: 0;
  pointer-events: none;
}

.tds-form-input-hidden-choice+.tds-form-input {
  cursor: pointer;
  outline-offset: 0;
}

.tds-form-input-hidden-choice[disabled]+.tds-form-input {
  cursor: not-allowed;
  opacity: var(--tds-ui-opacity-50);
  pointer-events: none;
}

.tds-form-input-hidden-choice:checked+.tds-form-input {
  font-weight: var(--tds-font-weight--medium);
}

/* Option adaptations of the outlined input pattern
 * - relies on the hidden choice structure */

.tds-form-input--option .tds-form-input-hidden-choice:checked+.tds-form-input,.tds-form-input-hidden-choice:checked+.tds-form-input.tds-form-input--option {
  --tds-form-input--border-color: var(--tds-theme-primary);
  --tds-form-input--border-width: var(--tds-border-width--large);

  color: var(--tds-theme-foreground-high-contrast);
}

/* stylelint-disable-next-line */

.tds-form-input-hidden-choice:focus-visible+.tds-form-input {
  --tds-form-input--border-color: var(--tds-theme-foreground-low-contrast);

  outline: var(--tds-outline--focus);
}

.tds--indicate-focus .tds-form-input-hidden-choice:focus+.tds-form-input {
  outline: var(--tds-outline--focus);
}

/* Visual feaux-choice input inside label
 * - styles largely copied/adapted from form-input-choice
 * - adapted for the different checkbox + label structure */

.tds-form-input-visual-checkbox {
  --tds-form-input-choice--fill-size: var(--tds-form-input-choice--check-size);
  border-radius: var(--tds-size--half);
  box-shadow: inset 0 0 0 1px var(--tds-theme-foreground-low-contrast);

  color: inherit;
  cursor: pointer;
  display: inline-flex;

  /* Height set via min/max to ensure flex doesn't squish them */
  max-block-size: var(--tds-height--choice);
  max-inline-size: var(--tds-height--choice);
  min-block-size: var(--tds-height--choice);
  min-inline-size: var(--tds-height--choice);
  transition: box-shadow .33s ease;

  /* When standalone, radios and checkboxes have different baseline vertical alignments */
  vertical-align: middle;
}

.tds-form-input-leading .tds-form-input-visual-checkbox {
  -webkit-margin-end: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
}

.tds-form-input-hidden-choice:focus+.tds-form-input .tds-form-input-visual-checkbox {
  box-shadow: inset 0 0 0 2px var(--tds-theme-foreground-high-contrast);
}

.tds-form-input-visual-checkbox:after {
  background-image: var(--tds-background-image--check);
  background-repeat: no-repeat;
  block-size: var(--tds-form-input-choice--fill-size);
  content: "";
  inline-size: var(--tds-form-input-choice--fill-size);
  margin: auto;
  transform: scale(0);
  transition: transform .33s var(--tds-bezier);
}

.tds-form-input-hidden-choice:checked+.tds-form-input .tds-form-input-visual-checkbox:after {
  transform: scale(1);
}

/* Swatch */

.tds-form-input--swatch {
  block-size: var(--tds-size--3x);
  border-radius: inherit;
  box-shadow: 0 0 0 1px #333;
  display: block;
  inline-size: var(--tds-size--3x);
}

/* stylelint-disable */

/* Align to v6 baseline, TODO: remove this after clean baseline */

.tds-density--dense .tds-form-input--option,.tds-density--dense.tds-form--outdent .tds-form-input--option {
  --tds-form--indent: 20px;
}

.tds-theme--v6 .tds-density--dense .tds-form-input--option {
  --tds-form--indent: 16px;
}

/**
 * Form Input Phone
 */

/* Note: Minimal styles for phone for now, html template based on input-text */

.tds-country-phone-label--long .tds-country-code {
  -webkit-padding-end: var(--tds-size--half);
  display: inline-block;
  inline-size: 32px;
          padding-inline-end: var(--tds-size--half);
}

/**
 * Form Input Text
 */

.tds-form-input-text {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: var(--tds-border-radius--outline-only);
  color: inherit;
  flex-grow: 1;
  font-weight: var(--tds-font-weight--medium);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
}

.tds-form-input-text:focus {
  outline: none;
}

/* TODO: AWSM-4555 Temp solution until we have type="search" as an actual component */

.tds-form-input-text[inputmode=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

/**
 * Form Input Textarea
 */

.tds-form-input-textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: none;
  border-radius: var(--tds-border-radius--outline-only);
  color: inherit;
  flex-grow: 1;
  font-weight: var(--tds-font-weight--medium);
  margin: 0;
  min-block-size: calc(var(--tds-height--pill)*3);
  padding: 0;
  resize: none;
}

/* Replace the padding from the encapsulation to ensure handle is on the outside */

.tds-form-input--default .tds-form-input-textarea {
  /* inline-size: calc(100% + var(--tds-border-radius--pill) * 2); */
  margin: 0 calc(var(--tds-form--indent)*-1);
  padding: var(--tds-size--1x) var(--tds-form--indent);
}

.tds-form-input-textarea:focus {
  outline: none;
}

.tds-form-input-textarea:is(:hover,:focus,:active) {
  resize: vertical;
}

/**
 * Form Label
 */

.tds-form-feedback {
  -webkit-padding-end: var(--tds-form--indent);
  -webkit-padding-start: var(--tds-form--indent);
  color: var(--tds-form-feedback--color, var(--tds-form-label--color));
  display: flex;
  font-size: var(--tds-font-size--20);
  justify-content: space-between;
          padding-inline-end: var(--tds-form--indent);
          padding-inline-start: var(--tds-form--indent);
}

:is(.tds-form-input,.tds-form-input-group,.tds-form-label,.tds-form-caption)+.tds-form-feedback {
  -webkit-margin-before: var(--tds-size--1x);
          margin-block-start: var(--tds-size--1x);
}

.tds-form-feedback-text {
  flex-grow: 1;
  text-align: end;
}

.tds-form--error .tds-form-helper-text {
  display: none;
}

.tds-form--error .tds-form-feedback-text {
  font-weight: var(--tds-font-weight--medium);
  text-align: start;
}

/**
 * Form Label
 */

.tds-form-label {
  -webkit-padding-end: calc(var(--tds-form--indent)/2);
  -webkit-padding-start: var(--tds-form--indent);
  color: var(--tds-form-label--color);
  display: block;
  font-weight: var(--tds-font-weight--medium);
          padding-inline-end: calc(var(--tds-form--indent)/2);
          padding-inline-start: var(--tds-form--indent);
  transition: color .33s ease;
}

.tds-form-label-tooltip {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}

.tds-form-label-tooltip .tds-icon--inline:is(:first-child,:last-child) {
  -webkit-margin-end: 0;
  -webkit-margin-start: 0;
          margin-inline-end: 0;
          margin-inline-start: 0;
}

.tds-form-caption {
  -webkit-padding-end: calc(var(--tds-form--indent)/2);
  -webkit-padding-start: var(--tds-form--indent);
  color: var(--tds-theme-foreground-low-contrast);
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--10);
          padding-inline-end: calc(var(--tds-form--indent)/2);
          padding-inline-start: var(--tds-form--indent);
}

:is(.tds-form-input,.tds-form-input-group)+.tds-form-caption {
  -webkit-margin-before: var(--tds-size--1x);
          margin-block-start: var(--tds-size--1x);
}

/*
 * Icon Button
 * - Distinct from regular buttons, in that this is designed to handle a standalone icon without visible text
**/

.tds-icon-btn {
  --tds-icon-btn--background: transparent;
  --tds-icon-btn--border-width: var(--tds-border-width--medium);
  align-items: center;
  -webkit-backdrop-filter: blur(0);
          backdrop-filter: blur(0);
  background-color: var(--tds-icon-btn--background);
  block-size: var(--tds-height--pill);

  /* Border remains transparent all the time, just functions like a spacer to inset
  the focus state's box shadow. Will refactor someday,
  once buttons have better focus states */
  border: var(--tds-icon-btn--border-width) solid transparent;
  border-radius: var(--tds-border-radius--pill);
  box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width) transparent;

  display: inline-flex;
  inline-size: var(--tds-height--pill);
  justify-content: center;
  padding: var(--tds-size--half);
  transition: color .33s ease, background-color .33s ease, box-shadow .25s ease, transform .33s var(--tds-bezier);
  vertical-align: middle;
}

/* States */

.tds-icon-btn:focus {
  box-shadow: inset 0 0 0 var(--tds-icon-btn--border-width);
  outline: none;
}

@media (hover:hover) {
  /* Treat TR hover like a hover on the button */
  .tds-data-table tbody tr.tds--highlighted .tds-td--actions .tds-icon-btn,.tds-data-table tbody tr:hover .tds-td--actions .tds-icon-btn:not([disabled]),.tds-icon-btn:is(:hover:not([disabled]),.tds--highlighted) {
    --tds-icon-btn--background: var(--tds-theme-background-container-alt);

    -webkit-backdrop-filter: blur(var(--tds-blur--button));

            backdrop-filter: blur(var(--tds-blur--button));
  }

  /* Align with tertiary button hoverstate for highlighted icon-buttons */
  .tds-icon-btn.tds--highlighted:not([disabled]):hover {
    --tds-icon-btn--background: var(--tds-theme-background-container-alt-highlight);
  }
}

/* icon-btns should not force an input to be unnaturally tall
 * this is a trade-off, either the input size is increased to accommodate the button
 * or the button sits very tight in dense layouts
 * It's super edge-casey, but in some cases (like the password input)
 * the icon-btn doesn't have a small version, so we want to fall back to the
 * least-broken-looking of several bad options :) */

:is(.tds-form-input-leading,.tds-form-input-trailing) .tds-icon-btn {
  -webkit-margin-after: calc(var(--tds-size--1x)*-1);
  -webkit-margin-before: calc(var(--tds-size--1x)*-1);
          margin-block-end: calc(var(--tds-size--1x)*-1);
          margin-block-start: calc(var(--tds-size--1x)*-1);
}

/* Override the size of the icon button so that it fits the pill's height */

.tds-form-input .tds-icon-btn {
  --tds-icon-btn--border-width: 1px;

  block-size: calc(var(--tds-height--pill) - var(--tds-size--1x));
  inline-size: calc(var(--tds-height--pill) - var(--tds-size--1x));
}

/* Sizes */

/* stylelint-disable no-descending-specificity */

.tds-icon-btn.tds-icon-btn--large,:where(.tds-density--default) .tds-icon-btn {
  --tds-height--pill: var(--tds-size--5x);
  --tds-icon-btn--border-width: var(--tds-border-width--medium);
}

.tds-icon-btn.tds-icon-btn--medium,:where(.tds-density--dense) .tds-icon-btn {
  --tds-height--pill: var(--tds-size--4x);
  --tds-icon-btn--border-width: var(--tds-border-width--small);
}

/* stylelint-enable no-descending-specificity */

.tds-icon-btn.tds-icon-btn--small {
  --tds-height--pill: 28px;
  --tds-icon-btn--border-width: var(--tds-border-width--small);
}

/* Cancel out the padding on the last trailing icon button */

.tds-form-input--default .tds-form-input-trailing .tds-icon-btn:last-child {
  -webkit-margin-end: calc(var(--tds-size--half)*-1);
          margin-inline-end: calc(var(--tds-size--half)*-1);
}

.tds-form-input--default .tds-form-input-leading .tds-icon-btn:first-child {
  -webkit-margin-start: calc(var(--tds-size--half)*-1);
          margin-inline-start: calc(var(--tds-size--half)*-1);
}

/**
 * Icon
 * - Collects any overrides and/or new styles for the Stable Icon set
 */

.tds-component-preview,:root {
  --tds-icon--bg: transparent;
  --tds-icon--size: 24px;
}

.tds-icon {
  background: var(--tds-icon--bg);
  block-size: var(--tds-icon--size);
  content: "";
  display: block;
  inline-size: var(--tds-icon--size);
  max-inline-size: 100%;
  min-block-size: var(--tds-icon--size);
  min-inline-size: var(--tds-icon--size);
  overflow: hidden;
  text-indent: -9999px;

  /* Color changes in icons are usually separate from transforms/flips,
   * hence the different timing */
  transition: color .33s ease, transform .5s var(--tds-bezier);
}

.tds-icon--small {
  --tds-icon--size: 16px;
}

/* Auto-flip all arrow variants for RTL */

[dir=rtl] :is([class*=tds-icon-arrow],[class*=tds-icon-chevron],[class*=tds-icon-speaker]) {
  transform: rotateY(180deg);
}

/* CSS animation support */

.tds-icon--flip-x {
  transform: rotateX(180deg);
}

/* Note: Y-axis rotation needs to be first, otherwise it will also animate (just in a 360) during the flip-x transition */

[dir=rtl] :is([class*=tds-icon-arrow],[class*=tds-icon-chevron],[class*=tds-icon-speaker]).tds-icon--flip-x {
  transform: rotateY(180deg) rotateX(180deg);
}

/* Variants */

.tds-icon--inline {
  display: inline-block;
}

.tds-icon--inline:last-child {
  -webkit-margin-start: var(--tds-size--half);
          margin-inline-start: var(--tds-size--half);
}

.tds-icon--inline:first-child {
  -webkit-margin-end: var(--tds-size--half);
          margin-inline-end: var(--tds-size--half);
}

/* Alignment */

.tds-icon--text-bottom {
  vertical-align: text-bottom;
}

.tds-icon--text-top {
  vertical-align: text-top;
}

.tds-icon--text-middle {

  /* Visual offset to align to the center of Gotham's capital glyphs */
  -webkit-margin-before: -.2em;
          margin-block-start: -.2em;
  vertical-align: middle;
}

/* Wordmark */

.tds-icon-logo-wordmark {
  inline-size: calc(var(--tds-icon--size)*5);
}

/* Loader
Note the mask SVG path is the same as the path in the icons.
The mask hides the background conic-gradient, and the SVG path transparent color hides the SVG's path.
This is makes the loader icon backward compatible.
*/

.tds-icon-loader {
  background: conic-gradient(from 30deg, hsla(0,0%,47%,0), hsla(0,0%,47%,.48), hsla(0,0%,47%,.8), #777);
  color: hsla(0,0%,100%,0);
  -webkit-mask: url('data:image/svg+xml;charset=utf-8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><path d="M24 1a2.347 2.347 0 1 1 0 4.694 18.306 18.306 0 1 0 13.359 5.792 2.347 2.347 0 1 1 3.426-3.21A23 23 0 1 1 24 1Z"/></svg>');
          mask: url('data:image/svg+xml;charset=utf-8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><path d="M24 1a2.347 2.347 0 1 1 0 4.694 18.306 18.306 0 1 0 13.359 5.792 2.347 2.347 0 1 1 3.426-3.21A23 23 0 1 1 24 1Z"/></svg>');
  -webkit-mask-size: cover;
          mask-size: cover;
  opacity: var(--tds-ui-opacity-70);
}

/* Sub-elements */

.tds-icon * {
  transition: fill .3s ease,stroke .3s ease;
}

/**
Badge positioning is controlled via Javascript in icon-badge.js
The script wraps the icon with an outer svg that applies a mask
to create a notch in the icon, then it positions the label inside
of a badge shape.

The badge color is set to a token, but has a fallback value of
--tds-color--primary or blue30, which is #3e6ae1.
*/

.tds-icon-badge {
  --tds-badge--color: var(--tds-theme-primary);
  --tds-badge--text-color: var(--tds-color-white);

  font-variant-numeric: tabular-nums;
  overflow: visible;
}

.tds-theme--replicant .tds-icon-badge {
  --tds-badge--text-color: var(--tds-color--black);
}

.tds-icon-trigger {
  --tds-icon-trigger--animation:
    color 900ms var(--tds-bezier),
    border 900ms var(--tds-bezier),
    opacity 900ms var(--tds-bezier),
    transform 900ms var(--tds-bezier),
    box-shadow 250ms var(--tds-bezier),
    background-color 900ms var(--tds-bezier);
  --tds-icon-trigger--border_size: 2px;
  --tds-icon-trigger--padding-inline-end: var(--tds-size--1x);
  --tds-icon-trigger--padding-inline-start: var(--tds-size--4x);
  -webkit-padding-after: var(--tds-size--1x);
  -webkit-padding-before: var(--tds-size--1x);
  -webkit-padding-end: var(--tds-icon-trigger--padding-inline-end);
  -webkit-padding-start: var(--tds-icon-trigger--padding-inline-start);

  align-items: center;
  background: none;
  border: none;
  color: var(--tds-theme-foreground);
  cursor: pointer;
  display: inline-flex;
  flex-flow: row nowrap;
  font-size: var(--tds-font-size--30);
  font-weight: var(--tds-font-weight--medium);
  min-block-size: var(--tds-size--5x);

  /* Should be the same height as buttons -- 40px */
  min-inline-size: var(--tds-size--3x);
          padding-block-end: var(--tds-size--1x);
          padding-block-start: var(--tds-size--1x);
          padding-inline-end: var(--tds-icon-trigger--padding-inline-end);
          padding-inline-start: var(--tds-icon-trigger--padding-inline-start);
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tds-icon-trigger.tds--disabled,.tds-icon-trigger:disabled {
  cursor: not-allowed;
  opacity: var(--tds-ui-opacity-50);
}

.tds-icon-trigger:after {
  border: none;
  opacity: 0;
}

.tds-icon-trigger .tds-label-title {
  text-transform: inherit;
}

.tds-icon-crosshatch {
  --tds-icon-crosshatch--border-radius: var(--tds-border-radius--pill);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  background-color: transparent;
  block-size: var(--tds-size--3x);
  border: var(--tds-icon-trigger--border_size) solid var(--tds-color--secondary-highlight);
  inline-size: var(--tds-size--3x);
  padding: 0;
}

.tds-icon-crosshatch,.tds-icon-crosshatch:after,.tds-icon-crosshatch:before {
  border-radius: var(--tds-icon-crosshatch--border-radius);
  left: 0;
  position: absolute;
  transition: var(--tds-icon-trigger--animation);
}

.tds-icon-crosshatch:after,.tds-icon-crosshatch:before {
  background-color: var(--tds-color--secondary-highlight);
  bottom: 0;
  content: "";
  margin: auto;
  right: 0;
  top: 0;
}

.tds-icon-crosshatch:before {
  block-size: calc(var(--tds-size--2x) - 4px);
  inline-size: var(--tds-icon-trigger--border_size);
}

.tds-icon-crosshatch:after {
  block-size: var(--tds-icon-trigger--border_size);
  inline-size: calc(var(--tds-size--2x) - 4px);
}

/* Small icon trigger */

.tds-icon-trigger--small {
  --tds-icon-trigger--padding-inline-start: calc(var(--tds-size--2x) + 8px);

  min-block-size: calc(var(--tds-size--2x) + 10px);
}

.tds-icon-trigger--small .tds-icon-crosshatch {
  block-size: var(--tds-size--2x);
  inline-size: var(--tds-size--2x);
}

.tds-icon-trigger--small .tds-icon-crosshatch:before {
  block-size: calc(var(--tds-size--2x) - 10px);
}

.tds-icon-trigger--small .tds-icon-crosshatch:after {
  inline-size: calc(var(--tds-size--2x) - 10px);
}

/* Unenclosed Trigger */

.tds-icon-trigger--unenclosed {
  transition: var(--tds-icon-trigger--animation);
}

.tds-icon-trigger--unenclosed .tds-icon-crosshatch {
  border: none;
}

.tds-icon-trigger--unenclosed .tds-label-title {
  -webkit-margin-end: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
}

/* Other Modifiers */

.tds-icon-trigger--reversed {
  --tds-icon-trigger--padding-inline-end: var(--tds-size--4x);
  --tds-icon-trigger--padding-inline-start: 0;
}

.tds-icon-trigger--reversed .tds-icon-crosshatch,[dir=rtl] .tds-icon-crosshatch {
  left: auto;
  right: 0;
}

[dir=rtl] .tds-icon-trigger--reversed,[dir=rtl] .tds-icon-trigger--reversed .tds-icon-crosshatch {
  left: 0;
  right: auto;
}

[aria-pressed=true] .tds-icon-crosshatch:before {
  transform: rotate(90deg);
}

[aria-pressed=true] .tds-icon-crosshatch:after {
  opacity: var(--tds-ui-opacity-0);
  transform: rotate(180deg);
}

/* Rotate icon */

.tds-icon-trigger--rotate[aria-pressed=true] .tds-icon-crosshatch:before {
  transform: rotate(135deg);
}

.tds-icon-trigger--rotate[aria-pressed=true] .tds-icon-crosshatch:after {
  opacity: var(--tds-ui-opacity-100);
  transform: rotate(315deg);
}

.tds-icon-trigger--invert-colors[aria-pressed=true] .tds-icon-crosshatch {
  background-color: var(--tds-color--secondary-highlight);
}

.tds-icon-trigger--invert-colors[aria-pressed=true] .tds-icon-crosshatch:after,.tds-icon-trigger--invert-colors[aria-pressed=true] .tds-icon-crosshatch:before {
  background-color: var(--tds-color--inverse);
}

.tds-icon-trigger--chevron .tds-icon {
  transition: var(--tds-icon-trigger--animation);
}

.tds-icon-trigger--chevron[aria-pressed=true] .tds-icon {
  transform: rotateX(180deg);
}

.tds-icon-trigger--chevron {
  --tds-icon-trigger--padding-inline-end: 0;
  --tds-icon-trigger--padding-inline-start: 0;

  gap: var(--tds-size--half);
}

.tds-component-preview,:root {
  --tds-gutter: var(--tds-size--3x);
  --tds-gutter--half: calc(var(--tds-size--3x)/2);
  --tds-gutter--negative: calc(var(--tds-size--3x)*-1);
  --tds-gutter--half_negative: calc(var(--tds-gutter--negative)/2);
}

.tds-flex {
  display: flex;
  flex-flow: column wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width:600px) {
  .tds-flex {
    flex-flow: row wrap;
  }
}

.tds-flex-gutters {
  -webkit-margin-after: var(--tds-size--3x);
  -webkit-margin-before: var(--tds-gutter--negative);
  -webkit-margin-start: var(--tds-gutter--negative);
          margin-block-end: var(--tds-size--3x);
          margin-block-start: var(--tds-gutter--negative);
          margin-inline-start: var(--tds-gutter--negative);
}

@media (max-width:599px) {
  .tds-flex-small-gutters>* {
    -webkit-margin-before: var(--tds-size--1x);
    -webkit-margin-after: var(--tds-size--1x);
            margin-block-end: var(--tds-size--1x);
            margin-block-start: var(--tds-size--1x);
  }

  .tds-flex-small-gutters>:first-child {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  .tds-flex-small-gutters>:last-child {
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}

@media (min-width:600px) {
  .tds-flex-small-gutters>* {
    -webkit-margin-start: var(--tds-size--1x);
    -webkit-margin-end: var(--tds-size--1x);
            margin-inline-end: var(--tds-size--1x);
            margin-inline-start: var(--tds-size--1x);
  }

  .tds-flex-small-gutters>:first-child {
    -webkit-margin-start: 0;
            margin-inline-start: 0;
  }

  .tds-flex-small-gutters>:last-child {
    -webkit-margin-end: 0;
            margin-inline-end: 0;
  }
}

.tds-flex--nowrap {
  flex-wrap: nowrap;
}

.tds-flex-item {
  flex: 1;
}

.tds-grid--show_grid .tds-flex-item {
  overflow: hidden;
  position: relative;
}

.tds-grid--show_grid .tds-flex-item:before {
  -webkit-border-end: 1px solid rgba(149,236,255,.3);
  -webkit-border-start: 1px solid rgba(149,236,255,.3);
  background-color: rgba(149,236,255,.1);
  block-size: 100%;
          border-inline-end: 1px solid rgba(149,236,255,.3);
          border-inline-start: 1px solid rgba(149,236,255,.3);
  content: "";
  display: block;
  inline-size: calc(100% - 2px);
  left: 1px;
  position: absolute;
  top: 0;
}

.tds-grid--show_grid .tds-flex-gutters .tds-flex-item:before,.tds-grid--show_grid.tds-flex-gutters .tds-flex-item:before {
  inline-size: calc(100% - 26px);
  left: var(--tds-size--3x);
  top: var(--tds-size--3x);
}

.tds-flex-gutters .tds-flex-item {
  -webkit-padding-before: var(--tds-size--3x);
  -webkit-padding-start: var(--tds-size--3x);
          padding-block-start: var(--tds-size--3x);
          padding-inline-start: var(--tds-size--3x);
}

.tds-flex--flex_cells>.tds-flex-item {
  display: flex;
}

.tds-flex-item--no_gutter {
  -webkit-padding-before: 0;
  -webkit-padding-start: 0;
          padding-block-start: 0;
          padding-inline-start: 0;
}

.tds-flex-gutters .tds-flex-gutters {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

/* Columns spanning multiples
--------------------------------------------------------------------------- */

[class*=tds-flex--col_] {
  flex: none;
  transition: width .25s ease-in-out;
}

@media (min-width:600px) {
  .tds-flex--col_1of2 {
    inline-size: 50%;
  }

  .tds-flex--col_1of3 {
    inline-size: 33.3333%;
  }

  .tds-flex--col_2of3 {
    inline-size: 66.6667%;
  }

  .tds-flex--col_1of4 {
    inline-size: 25%;
  }

  .tds-flex--col_3of4 {
    inline-size: 75%;
  }

  .tds-flex--col_1of1 {
    inline-size: 100%;
  }
}

/* Vertical Alignment per row
--------------------------------------------------------------------------- */

.tds-flex--top {
  align-items: flex-start;
}

.tds-flex--bottom {
  align-items: flex-end;
}

.tds-flex--center {
  align-items: center;
}

/* Horizontal Alignment per row
--------------------------------------------------------------------------- */

.tds-flex--align-inline-start {
  justify-content: flex-start;
}

.tds-flex--align-inline-center {
  justify-content: center;
}

.tds-flex--align-inline-end {
  justify-content: flex-end;
}

/* In order for justify-content to work properly, child elements must have their flex unset */

.tds-flex--align-inline-center>.tds-flex-item,.tds-flex--align-inline-end>.tds-flex-item,.tds-flex--align-inline-start>.tds-flex-item {
  flex: unset;
}

/* Alignment per cell
--------------------------------------------------------------------------- */

.tds-flex-item--top {
  align-self: flex-start;
}

.tds-flex-item--bottom {
  align-self: flex-end;
}

.tds-flex-item--center {
  align-self: center;
}

/* Base classes for all media
--------------------------------------------------------------------------- */

.tds-flex--fit>.tds-flex-item {
  flex: 1;
}

@media (min-width:600px) {
  .tds-flex--full>.tds-flex-item {
    flex: 0 0 100%;
  }

  .tds-flex--halfs>.tds-flex-item {
    flex: 0 0 50%;
  }

  .tds-flex--thirds>.tds-flex-item {
    flex: 0 0 33.3333%;
  }

  .tds-flex--quarters>.tds-flex-item {
    flex: 0 0 25%;
  }

  /* Large screens
  --------------------------------------------------------------------------- */
  .tds-flex--large_fit>.tds-flex-item {
    flex: 1;
  }

  .tds-flex--large_full>.tds-flex-item {
    flex: 0 0 100%;
  }

  .tds-flex--large_halfs>.tds-flex-item {
    flex: 0 0 50%;
  }

  .tds-flex--large_thirds>.tds-flex-item {
    flex: 0 0 33.3333%;
  }

  .tds-flex--large_quarters>.tds-flex-item {
    flex: 0 0 25%;
  }
}

/* --- Custom Layouts
--------------------------------------------------------------------------- */

.tds-flex--as_columns {
  flex-flow: column wrap;
}

/* TODO: I'm annoyed this isn't underscored to match with the utility class above */

.tds-flex--as-rows {
  display: flex;
  flex-flow: row wrap;
}

/* --- Custom Templates
--------------------------------------------------------------------------- */

.tds-layout-flex--two_columns.tds-layout-flex--sidemenu>.tds-flex-item:first-child,.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left>.tds-flex-item:first-child {
  min-inline-size: 70%;
}

.tds-layout-flex--three_columns.tds-layout-flex--sidemenu>.tds-flex-item:first-child {
  min-inline-size: 60%;
}

.tds-layout-flex--three_columns.tds-layout-flex--sidemenu>.tds-flex-item:nth-child(2),.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left>.tds-flex-item:nth-child(2) {
  order: -1;
}

@media (max-width:599px) {
  .tds-layout-flex--three_columns.tds-layout-flex--sidemenu>.tds-flex-item:first-child,.tds-layout-flex--two_columns.tds-layout-flex--sidemenu_left>.tds-flex-item:first-child {
    order: -1;
  }
  .tds-flex-item {
    flex: 100%;
    inline-size: 100%;
    min-inline-size: 112px;
  }

  .tds-flex-gutters {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
            margin-block-start: 0;
  }

  .tds-flex-gutters .tds-flex-item {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}

.tds-layout-main {
  grid-area: main;
}

.tds-layout-aside {
  grid-area: aside--primary;
}

.tds-layout-aside+.tds-layout-aside {
  grid-area: aside--secondary;
}

/* -- Layout Helpers
---------------------------------------------------------------------------------------------------- */

.tds-layout :is(.tds-layout,.tds-layout--no_offset),.tds-layout.tds-layout--no_offset {
  -webkit-padding-end: 0;
  -webkit-padding-start: 0;
          padding-inline-end: 0;
          padding-inline-start: 0;
}

.tds-layout--constrained,.tds-layout--constrained_small {
  -webkit-margin-end: auto;
  -webkit-margin-start: auto;
          margin-inline-end: auto;
          margin-inline-start: auto;
}

.tds-layout--constrained_small {
  max-inline-size: 840px;
}

.tds-layout--constrained {
  max-inline-size: 1440px;
}

/* -- Base Layout
---------------------------------------------------------------------------------------------------- */

.tds-layout {
  -webkit-padding-end: var(--tds-content_container--gutter);
  -webkit-padding-start: var(--tds-content_container--gutter);
          padding-inline-end: var(--tds-content_container--gutter);
          padding-inline-start: var(--tds-content_container--gutter);
}

.tds-content_container>.tds-layout {
  -webkit-padding-end: 0;
  -webkit-padding-start: 0;
          padding-inline-end: 0;
          padding-inline-start: 0;
}

@media (min-width:600px) {
  .tds-layout {
    grid-gap: 0 var(--tds-size--3x);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: auto;
  }
}

/* -- One Column Layout
---------------------------------------------------------------------------------------------------- */

.tds-layout-item:first-child:last-child {
  grid-column: 1 /  13;
}

[class*=tds-layout-2col] .tds-layout-aside {
  grid-area: aside;
}

.tds-layout-main--left .tds-layout-aside,.tds-layout-main--right .tds-layout-main {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

/* --- Two-Column Layouts ----------------------------------------------- */

.tds-layout-2col.tds-layout-2col {
  grid-template: 1fr / repeat(2, 6fr);
}

.tds-layout-2col-has_main,.tds-layout-2col-has_main--large,.tds-layout-2col-spacious {
  grid-template: 1fr / repeat(12, 1fr);
}

.tds-layout-2col-has_main.tds-layout-main--left {
  grid-template-areas: "main main main main main main main main aside aside aside aside";
}

.tds-layout-2col-has_main.tds-layout-main--right {
  grid-template-areas: "aside aside aside aside main main main main main main main main";
}

.tds-layout-2col-has_main--large.tds-layout-main--left {
  grid-template-areas: "main main main main main main main main main aside aside aside";
}

.tds-layout-2col-has_main--large.tds-layout-main--right {
  grid-template-areas: "aside aside aside main main main main main main main main main";
}

/* --- Two-Column Layouts | Static Sidebar ------------------------------ */

.tds-layout-2col-static_sidebar.tds-layout-main--left {
  grid-template: "main aside" 1fr / 10fr minmax(204px, 2fr);
}

.tds-layout-2col-static_sidebar.tds-layout-main--right {
  grid-template: "aside main" 1fr / minmax(204px, 2fr) 10fr;
}

.tds-layout-2col-static_sidebar--large.tds-layout-main--left {
  grid-template: "main aside" 1fr / 9fr minmax(318px, 3fr);
}

.tds-layout-2col-static_sidebar--large.tds-layout-main--right {
  grid-template: "aside main" 1fr / minmax(318px, 3fr) 9fr;
}

/* --- Two-Column Layouts | Spacious ------------------------------------ */

@media (min-width:600px) {
  .tds-layout-main--left .tds-layout-aside,.tds-layout-main--right .tds-layout-main {
    -webkit-padding-start: 24px;
            padding-inline-start: 24px;
  }

  .tds-layout-2col-content_heavy.tds-layout-main--left .tds-layout-aside,.tds-layout-2col-content_heavy.tds-layout-main--right .tds-layout-main,.tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,.tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }
}

@media (min-width:900px) {
  .tds-layout-2col-spacious.tds-layout-main--left {
    grid-template-areas: ". main main main main main main . aside aside aside .";
  }

  .tds-layout-2col-spacious.tds-layout-main--right {
    grid-template-areas: ". aside aside aside . main main main main main main .";
  }

  .tds-layout-2col-content_heavy.tds-layout-main--left {
    grid-template: ". . main aside" 1fr / 1fr 1fr 7fr minmax(min-content, 318px);
  }

  .tds-layout-2col-content_heavy.tds-layout-main--right {
    grid-template: "aside main . . " 1fr / minmax(min-content, 318px) 7fr 1fr 1fr;
  }
}

@media (min-width:600px) and (max-width:899px) {
  .tds-layout-2col-spacious.tds-layout-main--left {
    grid-template-areas: "main main main main main main main aside aside aside aside aside";
  }

  .tds-layout-2col-spacious.tds-layout-main--right {
    grid-template-areas: "aside aside aside aside aside main main main main main main main";
  }

  .tds-layout-2col-spacious.tds-layout-main--left .tds-layout-aside,.tds-layout-2col-spacious.tds-layout-main--right .tds-layout-main {
    -webkit-padding-start: 24px;
            padding-inline-start: 24px;
  }

  .tds-layout-2col-content_heavy.tds-layout-main--left {
    grid-template: "main aside" 1fr / 9fr minmax(min-content, 318px);
  }

  .tds-layout-2col-content_heavy.tds-layout-main--right {
    grid-template: "aside main" 1fr / minmax(min-content, 318px) 9fr;
  }
}

.tds-layout-3col,.tds-layout-3col-has_main,.tds-layout-3col-has_main--large {
  grid-template-areas: "aside--primary main aside--secondary";
}

.tds-layout-3col {
  grid-template: 1fr / repeat(3, 4fr);
}

.tds-layout-3col-has_main,.tds-layout-3col-has_main--large {
  grid-template: 1fr / repeat(12, 1fr);
}

.tds-layout-3col-has_main .tds-layout-main {
  grid-column: 4 /  10;
}

.tds-layout-3col-has_main .tds-layout-aside+.tds-layout-aside {
  grid-column: 10 /  13;
}

.tds-layout-3col-has_main .tds-layout-main+.tds-layout-aside {
  grid-column: 1 /  4;
}

.tds-layout-3col-has_main--large .tds-layout-main {
  grid-column: 3 /  11;
}

.tds-layout-3col-has_main--large .tds-layout-aside+.tds-layout-aside {
  grid-column: 11 /  13;
}

.tds-layout-3col-has_main--large .tds-layout-main+.tds-layout-aside {
  grid-column: 1 /  3;
}

.tds-layout-3col-has_main--inset .tds-layout-main {
  grid-column: 4 /  10;
}

.tds-layout-3col-has_main--inset .tds-layout-aside+.tds-layout-aside {
  grid-column: 10 /  12;
}

.tds-layout-3col-has_main--inset .tds-layout-main+.tds-layout-aside {
  grid-column: 2 /  4;
}

.tds-layout-3col-has_main--spread .tds-layout-main {
  grid-column: 4 /  10;
}

.tds-layout-3col-has_main--spread .tds-layout-aside+.tds-layout-aside {
  grid-column: 11 /  13;
}

.tds-layout-3col-has_main--spread .tds-layout-main+.tds-layout-aside {
  grid-column: 1 /  3;
}

.tds-layout--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* --- Checkerboard ----------------------------------------------------- */

@media (min-width:600px) {
  .tds-layout-checkerboard {
    grid-gap: 0;
    grid-template: "checkboard--row" 1fr / 1fr;
  }

  .tds-layout-checkerboard .tds-layout-item {
    align-content: center;
    align-items: stretch;
    display: grid;
    grid-template: "checkerboard-asset checkerboard-caption" 1fr / 1fr 1fr;
    justify-content: center;
  }

  .tds-layout-checkerboard .tds-layout-checkerboard--caption {
    -webkit-padding-start: var(--tds-size--8x);
    -webkit-padding-end: var(--tds-size--8x);
    grid-area: checkerboard-caption;
            padding-inline-end: var(--tds-size--8x);
            padding-inline-start: var(--tds-size--8x);
    place-self: center stretch;
    text-align: start;
  }

  .tds-layout-checkerboard .tds-layout-item:nth-child(odd) {
    grid-template-areas: "checkerboard-caption checkerboard-asset";
  }

  .tds-layout-checkerboard .tds-layout-item:nth-child(2n) {
    grid-template-areas: "checkerboard-asset checkerboard-caption";
  }

  .tds-layout-checkerboard .tds-layout-item:nth-child(odd) .tds-layout-checkerboard--caption {
    text-align: end;
  }
}

.tds-layout-checkerboard .tds-layout-checkboard--asset {
  display: block;
  grid-area: checkerboard-asset;
  inline-size: 100%;
  max-inline-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/*
Shell
--------------
Intended for use as the whole page template and as such will include the following
  - Full-width header (i.e. masthead) - sticky or non
  - Layouts of various kinds
  - Full-width footer - sticky or non
*/

/* TODO: when site-header is redesigned, shell will likely need to be revisited */

.tds-component-preview,:root {
  --tds-shell-footer-height: initial;
  --tds-shell-header-height: var(--tds-size--7x);
}

.tds-shell {
  --tds-shell-content-height: calc(100vh - var(--tds-shell-header-height) - var(--tds-shell-footer-height));
  grid-gap: 0 24px;

  display: grid;

  /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
  grid-template-areas: "tds-shell-masthead" "tds-shell-content" "tds-shell-footer";
  grid-template-columns: auto;
  grid-template-rows: var(--tds-shell-header-height) 1fr var(--tds-shell-footer-height);
  min-block-size: 100vh;
  min-block-size: -webkit-fill-available; /* stylelint-disable-line value-no-vendor-prefix */
}

.tds-shell.tds-shell--no_footer {
  --tds-shell-footer-height: 0px;
}

@media (min-width:600px) {
  .tds-shell {
    --tds-shell-footer-height: 52px;
  }
}

.tds-shell-footer,.tds-shell-masthead {
  display: flex;
  flex-flow: row nowrap;
}

.tds-shell-masthead {
  grid-area: tds-shell-masthead;
  min-inline-size: 100vw;
  min-inline-size: -webkit-fill-available; /* stylelint-disable-line value-no-vendor-prefix */
}

.tds-shell-footer--is_sticky,.tds-shell-masthead--is_sticky {
  position: sticky;
}

.tds-shell-masthead--is_sticky {
  top: 0;
}

.tds-shell-footer--is_sticky {
  bottom: 0;
}

.tds-shell-footer {
  grid-area: tds-shell-footer;
}

.tds-shell-footer .tds-footer-nav {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
}

.tds-shell-content {
  grid-area: tds-shell-content;
  min-block-size: var(--tds-shell-content-height);
}

a {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

a:where(:focus,.tds--focus) {
  border-radius: var(--tds-border-radius--outline-only);
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

/* stylelint-disable-next-line no-descending-specificity */

:where(h1,h2) a:where(:focus,.tds--focus) {
  border-radius: var(--tds-size--half);
}

button.tds-link {
  display: inline;
  line-height: normal;
}

.tds-link {
  --tds-link--icon-margin: calc((var(--tds-icon--size) + var(--tds-size--half))*-1);
  background-color: transparent;

  border: 0;

  /* Handle wrapping lines of text within a link */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: 0 var(--tds-border-width--small) 0 0 currentColor;
  color: var(--tds-theme-foreground);
  cursor: pointer;
  font-family: var(--tds-font-family--combined);
  padding: 0;
  position: relative;
  text-align: initial;
  transition: box-shadow .33s var(--tds-bezier), color .33s ease;
}

.tds-link:is(:focus,.tds--focus) {
  border-radius: var(--tds-border-radius--outline-only);
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

.tds-link:is([disabled],.tds--disabled) {
  cursor: not-allowed;
  outline: none;
}

/* Variants */

.tds-link--secondary {
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-link--primary,.tds-link--secondary {
  box-shadow: 0 0 0 0 transparent;
  font-weight: var(--tds-font-weight--medium, 500);
}

.tds-link--primary {
  color: var(--tds-theme-foreground-primary);
}

.tds-link--vertical {
  -webkit-padding-start: var(--tds-size--half);
  box-shadow: 0 0 0 0 transparent;
          padding-inline-start: var(--tds-size--half);
}

@media (hover:hover) {
  .tds-link:is(:hover,.tds--hover):not(.tds-link--primary,.tds-link--vertical):not([disabled],.tds--disabled) {
    box-shadow: 0 var(--tds-border-width--medium) 0 0 currentColor;
    color: var(--tds-theme-foreground-high-contrast);
  }

  .tds-link--primary:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
    box-shadow: 0 0 0 0 transparent;
    color: var(--tds-theme-primary-highlight);
  }

  .tds-link--secondary:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
    color: var(--tds-theme-foreground);
  }

  .tds-link--vertical:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
    box-shadow: -4px 0 0 0 currentColor;
  }

  [dir=rtl] .tds-link--vertical:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
    box-shadow: 4px 0 0 0 currentColor;
  }
}

/* Icon support */

.tds-link--icon-leading {
  -webkit-margin-start: 28px;
          margin-inline-start: 28px;
}

.tds-link--icon-trailing {
  -webkit-margin-end: 28px;
          margin-inline-end: 28px;
}

:is(.tds-link,.tds-link--icon-leading,.tds-link--icon-trailing)>:is(.tds-icon--inline,.tds-icon) {
  position: absolute;
  top: -4px;
}

.tds-link--icon-leading>.tds-icon,.tds-link>.tds-icon--inline:first-child {
  left: var(--tds-link--icon-margin);
}

.tds-link--icon-trailing>.tds-icon,.tds-link>.tds-icon--inline:last-child {
  right: var(--tds-link--icon-margin);
}

[dir=rtl] .tds-link--icon-leading>.tds-icon,[dir=rtl] .tds-link>.tds-icon--inline:first-child {
  left: unset;
  right: var(--tds-link--icon-margin);
}

[dir=rtl] .tds-link--icon-trailing>.tds-icon,[dir=rtl] .tds-link>.tds-icon--inline:last-child {
  left: var(--tds-link--icon-margin);
  right: unset;
}

/* List */

.tds-list {
  --tds-list--separator-color: var(--tds-color--secondary-accent);
  --tds-list--timeline-color: var(--tds-theme-foreground);
  --tds-list-item--margin-block: var(--tds-size--1x);
  --tds-list-item--padding-inline: 0;

  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Lists should respect essential typographic spacing */

.tds-list+p,p+.tds-list {
  -webkit-padding-before: 14px;
          padding-block-start: 14px;
}

/* Variants */

.tds-list--ordered,.tds-list--padded,.tds-list--timeline,.tds-list--unordered {
  --tds-list-item--padding-inline: var(--tds-size--half);

  -webkit-padding-start: var(--tds-size--3x);

          padding-inline-start: var(--tds-size--3x);
}

.tds-list--ordered {
  list-style-type: decimal;
}

.tds-list--unordered {
  list-style-type: disc;
}

.tds-list--align-end {
  list-style-type: none;
  text-align: end;
}

.tds-list--borders {
  --tds-list-item--margin-block: var(--tds-size--2x);
}

.tds-list--small-borders {
  --tds-list-item--margin-block: var(--tds-size--3x);
}

.tds-list--timeline {
  --tds-list-item--margin-block: var(--tds-size--2x);
  --tds-list-item--padding-inline: 12px;
}

/* -----------------------------------------------------------------------
 If the Vertical Rhythm class is in place, we don't want to mess with nested
 lists' spacing, so we need to reset the spacer for anything nested.

 TODO: Remove this when vertical rhythm is the default (TDS v8-ish).
----------------------------------------------------------------------- */

.tds--vertical-rhythm .tds-list>.tds-list {
  --tds-spacer-top: 0;
}

/* Modifiers */

.tds-list--light {
  --tds-list--timeline-color: var(--tds-color--secondary-accent);
}

.tds-list--caption {
  --tds-list--timeline-color: var(--tds-theme-border);
  --tds-list-item--margin-block: var(--tds-size--half);

  font-size: 12px;
}

/* List Items */

.tds-list>:is(li,dd) {
  -webkit-padding-end: var(--tds-list-item--padding-inline);
  -webkit-padding-start: var(--tds-list-item--padding-inline);
          padding-inline-end: var(--tds-list-item--padding-inline);
          padding-inline-start: var(--tds-list-item--padding-inline);
  position: relative;
}

/* Horizontal */

.tds-list--horizontal>li {
  display: inline-block;
}

:is(.tds-list--light,.tds-list--caption)>li {
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-list>:is(li,dd):not(:last-of-type) {
  -webkit-margin-after: var(--tds-list-item--margin-block);
          margin-block-end: var(--tds-list-item--margin-block);
}

@media (min-width:600px) {
  .tds-list--horizontal>li:not(:last-of-type) {
    /* Copy the extra space the line-height creates in the vertical margin */
    -webkit-margin-after: 0;
    -webkit-margin-end: calc(var(--tds-list-item--margin-block) + .5em);
            margin-block-end: 0;
            margin-inline-end: calc(var(--tds-list-item--margin-block) + .5em);
  }
}

/*
 * Positioning for an icon if it's present at the beginning of an item
 * Small icons need shifting a smidge more than default icons
 *
 * Since the quiet space for both small and default icon sizes is
 * identical (2px), we can rely on a hard-coded value.
 *
 * Providing a custom property such that consumers can tap into the positioning of the icon if the default
 * styling does not quiet fit their exact needs.
 */

.tds-list>li>.tds-icon:first-child {
  --tds-icon--list-inset: calc(var(--tds-size--3x)/2*-1 - var(--tds-icon--size)/2 - 1px);
  background-color: var(--tds-theme-background, var(--tds-theme-foreground-on-primary));
  left: var(--tds-icon--list-inset);

  position: absolute;
  top: calc(var(--tds-size--1x) + 2px);
  transform: translateY(-50%);
  transition: background-color .3s ease;
  z-index: 1;
}

[dir=rtl] .tds-list>li>.tds-icon:first-child {
  left: auto;
  right: var(--tds-icon--list-inset);
}

/* Separator Types */

.tds-list--borders>li:before,.tds-list--small-borders>li:before,.tds-list>li.tds-list-item--separated:before {
  background-color: var(--tds-list--separator-color);
  block-size: 1px;
  content: "";
  display: block;
}

.tds-list--borders>li:before {
  -webkit-margin-after: var(--tds-list-item--margin-block);
          margin-block-end: var(--tds-list-item--margin-block);
}

.tds-list--small-borders>li:before {
  -webkit-margin-after: calc(var(--tds-list-item--margin-block)/2);
          margin-block-end: calc(var(--tds-list-item--margin-block)/2);
  max-inline-size: var(--tds-size--4x);
}

.tds-list>li.tds-list-item--separated:before {
  -webkit-margin-after: var(--tds-list-item--margin-block);
          margin-block-end: var(--tds-list-item--margin-block);
}

/* Timeline */

.tds-list--timeline>li:before,.tds-list--timeline>li:not(:last-of-type):after {
  background-color: currentColor;
  content: "";
  left: -14px;
  position: absolute;
  top: .5em;
}

.tds-list--timeline>li:before {
  -webkit-margin-start: -3px;
  block-size: var(--tds-size--1x);
  border-radius: var(--tds-size--1x);
  inline-size: var(--tds-size--1x);
          margin-inline-start: -3px;
}

.tds-list--timeline>li:not(:last-of-type):after {
  block-size: calc(100% + var(--tds-list-item--margin-block));
  display: block;
  inline-size: 2px;
}

[dir=rtl] .tds-list--timeline>li:before,[dir=rtl] .tds-list--timeline>li:not(:last-of-type):after {
  left: auto;
  right: -14px;
}

/**
 * Listbox
 */

.tds-listbox {
  --tds-listbox--padding-block: var(--tds-size--2x);

  border-radius: var(--tds-border-radius--outline-only);
  max-block-size: 300px;
  overflow-y: auto;
  scroll-behavior: auto;
}

.tds-dropdown.tds-tooltip>.tds-listbox {
  padding: var(--tds-listbox--padding-block) 0;
}

.tds-listbox-search {
  -webkit-border-after: 1px solid var(--tds-theme-background-container-alt);
          border-block-end: 1px solid var(--tds-theme-background-container-alt);
  padding: var(--tds-size--half) var(--tds-size--2x);
}

.tds-tooltip>.tds-listbox-search:first-child {
  -webkit-padding-before: var(--tds-size--half);
          padding-block-start: var(--tds-size--half);
}

/* Allow outline to be handled by the tooltip in the dropdown use-case */

.tds-tooltip>.tds-listbox-search .tds-form-input:focus-within {
  outline: none;
}

/* Fallback for non-:has() browsers */

.tds--indicate-focus .tds-form-input .tds-dropdown.tds-tooltip:focus-within {
  outline: var(--tds-outline--focus);
}

/* Visually indicate focus on the dropdown when focus moves to a search input within */

.tds--indicate-focus .tds-form-input .tds-dropdown.tds-tooltip:has(.tds-form-input-search:focus) {
  outline: var(--tds-outline--focus);
}

/** Intendation for listbox was kept at 20px. See AWSM-6533 for details. */

.tds-listbox-option {
  --tds-form--indent: 20px;

  align-items: center;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  margin: 0;
  max-inline-size: 100%;
  min-block-size: var(--tds-size--4x);
  outline-offset: -2px;
  padding: var(--tds-size--half) var(--tds-form--indent);
  text-align: start;
  transition: background-color .3s ease;
}

.tds-listbox-option:is(.tds--disabled,[aria-disabled=true]) {
  cursor: not-allowed;
}

.tds-density--dense .tds-listbox-option,.tds-density--dense.tds-listbox-option {
  --tds-form--indent: var(--tds-size--2x);
}

[aria-multiselectable=true] .tds-listbox-option {
  justify-content: flex-start;
}

.tds-listbox-option:focus {
  outline: none;
}

/* If focused using the class, don't check for the indication style,
 * as we should assume the js that's setting the class is responsible */

.tds-listbox-option:is(:focus-visible,.tds--focus) {
  border-radius: var(--tds-size--half);
  outline: var(--tds-outline--focus);
}

/* Fallback for browsers that don't support :focus-visible */

.tds--indicate-focus .tds-listbox-option:is(:focus,.tds--focus) {
  border-radius: var(--tds-size--half);
  outline: var(--tds-outline--focus);
}

.tds-listbox-option:is(:hover,.tds--hover):not(.tds--disabled,[aria-disabled=true]) {
  background-color: var(--tds-theme-background-container-alt);
}

.tds-listbox-option.tds--selected {
  background-color: var(--tds-theme-background-container-alt-highlight);
}

/* Normally inline icons have a visual adjustment to their alignment to match with text,
 * but in this case it's not necessary */

.tds-listbox-option .tds-icon {
  color: transparent;
  position: relative;
  transform: scale(0);
  transition: color .3s ease,transform .3s ease;
}

.tds--selected .tds-icon {
  color: currentColor;
  transform: scale(1);
}

.tds-singleselect-icon {
  -webkit-margin-start: var(--tds-size--1x);
          margin-inline-start: var(--tds-size--1x);
  top: 0;
}

.tds-multiselect-box {
  -webkit-margin-end: 12px;
  block-size: calc(var(--tds-size--2x) + 2px);
  border: 1px solid var(--tds-theme-border);
  border-radius: var(--tds-size--half);
  display: inline-block;
  inline-size: calc(var(--tds-size--2x) + 2px);
          margin-inline-end: 12px;
  transition: border-color .3s ease;
}

.tds--selected .tds-multiselect-box {
  border-color: var(--tds-theme-foreground-high-contrast);
}

.tds-loader {
  background-color: var(--tds-color--scrim--semitransparent);
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity .5s ease;

  /* Ensure Loader sits above all TDS components,
   * but an still be superceeded by consumers */
  z-index: 1010;
}

.tds-loader--show {
  opacity: 1;
  pointer-events: inherit;
}

.tds-loader .tds-icon {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.tds-loader .tds-icon-loader {
  --tds-icon--size: var(--tds-size--6x);

  animation: var(--tds--rotating);
  opacity: var(--tds-ui-opacity-70);
}

.tds-loader .tds-icon-logo {
  animation: var(--tds--pulsing);
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-locale-selector {
  display: flex;
  inline-size: 100%;
  justify-content: center;
  max-inline-size: 1260px;
  padding: 0 var(--tds-size--2x);
}

.tds-locale-selector--narrow {
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}

.tds-locale-selector-trigger {
  background-color: transparent;
  cursor: pointer;
  display: flex;
  transition: background-color .33s ease;
}

.tds-locale-selector-column {
  inline-size: 100%;
  margin: 0 auto;
  max-inline-size: 700px;
}

.tds-locale-selector-superregion {
  padding: 0 12px var(--tds-size--3x);
}

.tds-locale-selector-region {
  -webkit-margin-end: -12px;
  -webkit-margin-start: -12px;
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: var(--tds-size--2x);
       column-gap: var(--tds-size--2x);
          margin-inline-end: -12px;
          margin-inline-start: -12px;
}

.tds-locale-selector--narrow .tds-locale-selector-region {
  -moz-column-count: 1;
       column-count: 1;
}

.tds-locale-selector-region-name {
  -webkit-padding-after: 12px;
  -webkit-padding-before: var(--tds-size--2x);
          padding-block-end: 12px;
          padding-block-start: var(--tds-size--2x);
}

.tds-locale-selector--narrow .tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child>.tds-locale-selector-region-name {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}

.tds-locale-selector-country {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  flex-flow: row wrap;
  transition: background-color .33s ease;
}

.tds-locale-selector-country:not(:last-child) {
  -webkit-margin-after: var(--tds-size--half);
          margin-block-end: var(--tds-size--half);
}

/* Override default card background */

.tds-card.tds-locale-selector-country,.tds-card.tds-locale-selector-trigger {
  background-color: transparent;
  border-radius: var(--tds-border-radius--card);
}

.tds-card.tds-locale-selector-country,.tds-card.tds-locale-selector-trigger .tds-card-body {
  padding: var(--tds-size--1x) 12px;
}

.tds-card.tds-locale-selector-trigger .tds-card-body {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}

.tds-card.tds-locale-selector-trigger .tds-icon {
  -webkit-margin-before: calc(var(--tds-size--1x) - 2px);
  -webkit-margin-start: 12px;
          margin-block-start: calc(var(--tds-size--1x) - 2px);
          margin-inline-start: 12px;
}

.tds-locale-selector-trigger:focus {
  outline: none;
}

.tds--indicate-focus .tds-locale-selector-trigger:focus {
  outline: var(--tds-outline--focus);
}

/* Make sure hover states don't get confusing on touch devices */

@media (hover:hover) {
  .tds-card.tds-locale-selector-country:hover,.tds-card.tds-locale-selector-trigger:hover {
    background-color: var(--tds-theme-background-container);
  }
}

.tds-card.tds-locale-selector-country--selected {
  background-color: var(--tds-theme-background-container);
}

.tds-locale-selector-language {
  -webkit-margin-before: 2px;
  font-size: 12px;
          margin-block-start: 2px;
}

.tds-locale-selector-language:not(:last-child) {
  -webkit-margin-end: var(--tds-size--2x);
          margin-inline-end: var(--tds-size--2x);
}

.tds-locale-selector-language--selected {
  color: var(--tds-theme-foreground-high-contrast);
  pointer-events: none;
}

/* Custom breakpoint based on columns */

@media (max-width:1240px) {
  .tds-locale-selector {
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media (max-width:599px) {
  .tds-locale-selector-region {
    -moz-column-count: 1;
         column-count: 1;
  }

  .tds-locale-selector-column:first-child .tds-locale-selector-superregion:first-child>tds-locale-selector-region-name {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
}

.tds-card.tds-locale-selector-country .tds-text--h6 {
  inline-size: 100%;
}

.tds-card.tds-locale-selector-country>.tds-list {
  margin: 0;
}

.tds-media-player {
  --tds-media-player--color: var(--tds-color-white, #fff);

  visibility: hidden;
}

.tds-media-player.ready {
  visibility: visible;
}

.tds-media-player .tds-form-label {
  padding: 0;
}

.tds-media-player-range {
  --tds-form-item--grid-template-areas: "label input";

  align-items: center;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-rows: unset;
}

.tds-media-player-range .tds-form-label-wrap {
  --tds-form-label--color: var(--tds-media-player--color, #fff);

  -webkit-padding-end: 12px;
  -webkit-padding-start: 0;

          padding-inline-end: 12px;
          padding-inline-start: 0;
}

.tds-media-player .tds-icon {
  --tds-icon--size: 28px;

  fill: var(--tds-media-player--color, #fff);
}

.tds-media-player .tds-icon>g { display: none; }

.tds-media-player [aria-pressed=false] .tds-icon>g:first-of-type,.tds-media-player [aria-pressed=true] .tds-icon.tds-icon-speaker--low>g:not(:first-of-type,:last-of-type),.tds-media-player [aria-pressed=true] .tds-icon:not(.tds-icon-speaker)>g:last-of-type { display: initial; }

.tds-media-player [aria-pressed=true] .tds-icon.tds-icon-speaker--high>g:is(:last-of-type) { display: initial; }

/**
 * tds-modals core styles
 * - Import this file only if you are running your own css post-processor and know what you're doing.
 */

.tds-modal--is-open {
  overflow: hidden;
}

/* Core Modal */

.tds-modal {
  --tds-modal-border-radius: var(--tds-size--1x);

  /* Note: -webkit-fill-available does not work inside a calc rule */
  background-color: var(--tds-theme-background-dialog);

  block-size: var(--tds-modal--height);
  border: none;
  border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0 0;
  bottom: 0;
  box-shadow: var(--tds-box-shadow--large-reverse);
  color: var(--tds-theme-foreground);
  display: flex;
  flex-direction: column;
  inline-size: var(--tds-modal--width);
  left: 0;
  max-block-size: calc(100% - var(--tds-size--3x));
  overflow-y: auto;

  /* Only works in some cases, kept for future-proofing: AWSM-4162 */
  overscroll-behavior: contain;
  padding: 0;
  position: fixed;
  right: 0;
  z-index: 1000;
}

/* This is only required for Safari 14.1. Once support for it drops below 1%, we can ditch */

.tds-modal img {
  display: block;
  min-inline-size: 100%;
}

/* Variants */

.tds-modal--fullscreen,.tds-modal--sheet-left,.tds-modal--sheet-right {
  --tds-modal--height: 100%;
  --tds-modal--height: 100dvh;

  border-radius: 0;
  bottom: 0;
  max-block-size: var(--tds-modal--height);
  min-block-size: var(--tds-modal--height);
  top: 0;
}

.tds-modal--fullscreen {
  --tds-modal--width: 100vw;

  max-inline-size: 100vw;
}

.tds-modal--sheet-left,.tds-modal--sheet-right {
  --tds-modal--width: 414px;

  max-inline-size: calc(100vw - var(--tds-size--6x));
}

.tds-modal--sheet-small {
  --tds-modal--width: 311px;
}

/* stylelint-disable no-descending-specificity */

.tds-modal--sheet-left,[dir=rtl] .tds-modal--sheet-right {
  left: 0;
  right: auto;
}

.tds-modal--sheet-right,[dir=rtl] .tds-modal--sheet-left {
  left: auto;
  right: 0;
}

/* stylelint-enable no-descending-specificity */

/* Closed State */

.tds-modal:not([open]) {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s;
  visibility: hidden;
}

.tds-modal--fullscreen:not([open]),.tds-modal:not([open]) {
  transform: translateX(0) translateY(50%);
}

/* stylelint-disable no-descending-specificity */

.tds-modal--sheet-left:not([open]),[dir=rtl] .tds-modal--sheet-right:not([open]) {
  transform: translateX(-50%) translateY(0);
}

.tds-modal--sheet-right:not([open]),[dir=rtl] .tds-modal--sheet-left:not([open]) {
  transform: translateX(50%) translateY(0);
}

/* stylelint-enable no-descending-specificity */

/* Open State */

.tds-modal[open] {
  opacity: 1;
  pointer-events: inherit;
  transform: translateX(0) translateY(0);
  transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s;
  visibility: inherit;
}

@media (max-width:599px) {
  .tds-component-preview,:root {
    --tds-modal--height: auto;
    --tds-modal--width: 100vw;
  }

  .tds-modal {
    min-block-size: 25vh;
  }
}

@media (min-width:600px) {
  .tds-component-preview,:root {
    --tds-modal--height: auto;
    --tds-modal--width: 772px;
  }

  .tds-modal {
    --tds-modal-border-radius: var(--tds-size--2x);
    border-radius: var(--tds-modal-border-radius);

    bottom: 50%;
    box-shadow: var(--tds-box-shadow--large);
    margin: auto;
    max-block-size: calc(100% - var(--tds-size--12x));
    max-inline-size: calc(100vw - var(--tds-size--12x));
    min-block-size: var(--tds-size--8x);
  }

  .tds-modal--fullscreen,.tds-modal--sheet-left,.tds-modal--sheet-right {
    border-radius: 0;
    bottom: 0;
    max-block-size: 100vh;
  }

  .tds-modal--fullscreen {
    max-inline-size: 100vw;
  }

  .tds-modal:not([open]) {
    transform: translateX(0) translateY(100%);
  }

  /* stylelint-disable no-descending-specificity */
  .tds-modal--sheet-left:not([open]),[dir=rtl] .tds-modal--sheet-right:not([open]) {
    transform: translateX(-50%) translateY(0);
  }

  .tds-modal--sheet-right:not([open]),[dir=rtl] .tds-modal--sheet-left:not([open]) {
    transform: translateX(50%) translateY(0);
  }

  /* stylelint-enable no-descending-specificity */

  .tds-modal[open] {
    transform: translateX(0) translateY(50%);
  }

  .tds-modal--fullscreen[open],.tds-modal--sheet-left[open],.tds-modal--sheet-right[open] {
    transform: translateX(0) translateY(0);
  }
}

/* Modal Backdrop */

dialog.tds-modal::backdrop {
  display: none !important;
}

.tds-component-preview,:root {
  --tds-modal-backdrop--rgb: 0, 0, 0;
}

.tds-modal-backdrop {
  background-color: rgba(var(--tds-modal-backdrop--rgb), var(--tds-modal-backdrop--opacity));
  block-size: 120vh;
  inline-size: 120vw;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color .5s ease,-webkit-backdrop-filter .5s ease;
  transition: background-color .5s ease,backdrop-filter .5s ease;
  transition: background-color .5s ease,backdrop-filter .5s ease,-webkit-backdrop-filter .5s ease;
  z-index: 999;
}

.tds-modal:not([open])+.tds-modal-backdrop {
  --tds-modal-backdrop--opacity: 0;

  -webkit-backdrop-filter: blur(0);

          backdrop-filter: blur(0);
  pointer-events: none;
}

.tds-modal[open]+.tds-modal-backdrop {
  --tds-modal-backdrop--opacity: 0.3;

  -webkit-backdrop-filter: blur(4px);

          backdrop-filter: blur(4px);
  pointer-events: inherit;
}

/* Modal Actions */

.tds-modal-header {
  -webkit-padding-start: var(--tds-size--3x);
  align-items: flex-start;
  background-color: var(--tds-theme-background-dialog);

  /* At certain sizes browsers will render the sticky header 1px too low,
   * allowing scrolling content to be visible above it */
  box-shadow: 0 -2px 0 0 var(--tds-theme-background-dialog);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: var(--tds-size--2x);
          padding-inline-start: var(--tds-size--3x);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tds-modal-close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background-color: transparent;
  border: none;
  border-radius: var(--tds-border-radius--pill);
  cursor: pointer;
  outline: none;
  padding: var(--tds-size--1x);
  transition: background-color .33s ease;
  z-index: 10;
}

[dir=rtl] .tds-modal-close {
  left: 0;
  right: auto;
}

.tds-modal-close:hover {
  background-color: var(--tds-theme-background-container-alt);
}

.tds-modal-close:focus {
  outline: none;
}

.tds-modal-close:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

.tds--indicate-focus .tds-modal-close:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

.tds-modal-close--over-image:hover {
  background-color: rgba(var(--tds-color--rgb-shade), .16);
}

.tds-modal-close--over-image .tds-modal-close-icon {
  color: var(--tds-theme-foreground-on-primary);
}

/* Header & Footer */

.tds-modal-header>:is(h1,h2,h3) {
  -webkit-padding-after: 0;
          padding-block-end: 0;
  transition: padding .33s var(--tds-bezier), font-size .33s var(--tds-bezier), line-height .33s var(--tds-bezier);
}

.tds-modal-footer {
  background-color: var(--tds-theme-background-dialog);
  bottom: calc(var(--tds-size--3x)*-1);
  padding: var(--tds-size--3x) var(--tds-size--3x) var(--tds-size--6x);
  position: sticky;
  transition: padding .33s var(--tds-bezier);
  z-index: 11;
}

/* Shrink the header/footer when internally scrolling */

.tds-modal--scrolling .tds-modal-header>:is(h1,h2,h3) {
  -webkit-padding-before: var(--tds-size--1x);
  font-size: var(--tds-font-size--40);
  line-height: var(--tds-line-height--50);
          padding-block-start: var(--tds-size--1x);
}

/* Content */

.tds-modal-content {
  padding: 0 var(--tds-size--3x) var(--tds-size--6x);
}

/* Correction for focused items within, since header is a sticky element */

.tds-modal-header+.tds-modal-content {
  -webkit-padding-before: var(--tds-size--half);
          padding-block-start: var(--tds-size--half);
}

.tds-modal-content:not(:last-child) {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}

/* Modifier to support datepicker inside modal */

.tds-modal-overflow--visible {
  overflow-y: visible;
}

.tds-modal-overflow--visible .tds-modal-header {
  border-radius: var(--tds-modal-border-radius) var(--tds-modal-border-radius) 0 0;
  position: unset;
}

.tds-modal-overflow--visible .tds-modal-footer {
  border-radius: 0 0 var(--tds-modal-border-radius) var(--tds-modal-border-radius);
  position: unset;
}

@media (min-width:600px) {

  .tds-modal-content,.tds-modal-footer,.tds-modal-header {
    -webkit-padding-start: var(--tds-size--6x);
            padding-inline-start: var(--tds-size--6x);
  }

  .tds-modal-content,.tds-modal-footer {
    -webkit-padding-end: var(--tds-size--6x);
            padding-inline-end: var(--tds-size--6x);
  }

  .tds-modal--sheet-small .tds-modal-content,.tds-modal--sheet-small .tds-modal-footer {
    -webkit-padding-start: var(--tds-size--4x);
    -webkit-padding-end: var(--tds-size--4x);
            padding-inline-end: var(--tds-size--4x);
            padding-inline-start: var(--tds-size--4x);
  }
}

/*
 * Page Layout
 * --------------
 */

/* stylelint-disable declaration-block-no-redundant-longhand-properties */

.tds-density--default,.tds-page-layout--medium-space,:root {
  --tds-page-layout--footer-start-space: var(--tds-size--12x);
  --tds-page-layout--title-end-space: var(--tds-size--4x);
  --tds-page-layout--title-start-space: var(--tds-size--6x);
  --tds-page-layout--title-top-slot-space: var(--tds-size--1x);
}

.tds-page-layout--large-space {
  --tds-page-layout--footer-start-space: 128px;
  --tds-page-layout--title-end-space: var(--tds-size--6x);
  --tds-page-layout--title-start-space: var(--tds-size--8x);
}

.tds-density--dense,.tds-page-layout--small-space {
  --tds-page-layout--footer-start-space: var(--tds-size--8x);
  --tds-page-layout--title-end-space: var(--tds-size--3x);
  --tds-page-layout--title-start-space: var(--tds-size--4x);
  --tds-page-layout--title-top-slot-space: var(--tds-size--half);
}

/* 2-column layout on mobile */

.tds-page-layout {
  grid-gap: 0 var(--tds-size--3x);
  -webkit-margin-after: var(--tds-page-layout--footer-start-space);

  /* Align to content container padding by default */
  -webkit-padding-end: var(--tds-content_container--gutter);
  -webkit-padding-start: var(--tds-content_container--gutter);
  display: grid;
  grid-template-areas:
    "title title"
    "open open"
    "main main"
    "aside aside";
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content min-content 1fr min-content;
          margin-block-end: var(--tds-page-layout--footer-start-space);
          padding-inline-end: var(--tds-content_container--gutter);
          padding-inline-start: var(--tds-content_container--gutter);
}

/* Inherit gutters from content container if wrapped within */

.tds-content_container .tds-page-layout {
  -webkit-padding-end: 0;
  -webkit-padding-start: 0;
          padding-inline-end: 0;
          padding-inline-start: 0;
}

.tds-page-aside {
  grid-area: aside;
}

/* Special content/spacer slot for either empty space, or small trailing UI
 * that should be available only in specific use-cases */

.tds-page-open {
  grid-area: open;
}

/**
 * Top of Page
 */

.tds-page-title {
  -webkit-margin-after: var(--tds-page-layout--title-end-space);
  display: grid;
  grid-area: title;
  grid-template:
    "top"
    "text"
    "bottom"
    "trailing";

  /* Top space is handled by a grid row in this case, so that content within
   * the top slot fills that space from the bottom-up, instead of pushing the title down */
  grid-template-rows: minmax(var(--tds-page-layout--title-start-space), max-content) auto auto auto;
          margin-block-end: var(--tds-page-layout--title-end-space);
}

.tds-page-title-top {
  -webkit-padding-after: var(--tds-page-layout--title-top-slot-space);

  /* ensure a min-safe-space between header and top-slot content */
  -webkit-padding-before: var(--tds-page-layout--title-top-slot-space);
  align-items: flex-end;
  display: flex;
  grid-area: top;
          padding-block-end: var(--tds-page-layout--title-top-slot-space);
          padding-block-start: var(--tds-page-layout--title-top-slot-space);
}

.tds-page-title-text {
  grid-area: text;
}

h1.tds-page-title-text {
  -webkit-padding-after: 0;
  -webkit-padding-before: 0;
          padding-block-end: 0;
          padding-block-start: 0;
}

.tds-page-title-trailing {
  -webkit-margin-before: var(--tds-size--2x);
  align-self: center;
  grid-area: trailing;
          margin-block-start: var(--tds-size--2x);
}

.tds-page-title-bottom {
  -webkit-padding-before: var(--tds-size--2x);
  grid-area: bottom;
          padding-block-start: var(--tds-size--2x);
}

/* Specific slot margin/padding fixes */

.tds-page-title-bottom .tds-status_msg,.tds-page-title-trailing .tds-btn_group {
  margin: 0;
}

@media (min-width:600px) {
  /* Enable 12-column layouts on tablet/desktop sizes */
  .tds-page-layout--narrow-main {
    grid-template-areas:
      ". title title title title title title title title title title ."
      ". main main main main main main main main main main .";
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content 1fr;
  }

  .tds-page-layout--content-level-aside {
    grid-template-areas:
      "title title title title title title title title title title title title"
      "aside aside aside open open open open open open open open open"
      "aside aside aside main main main main main main main main main";
  }

  .tds-page-layout--content-level-aside,.tds-page-layout--top-level-aside {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content min-content 1fr;
  }

  .tds-page-layout--top-level-aside {
    grid-template-areas:
      "aside aside aside title title title title title title title title title"
      "aside aside aside open open open open open open open open open"
      "aside aside aside main main main main main main main main main";
  }

  /* Horizontally align trailing space on tablet/desktop sizes */
  .tds-page-title {
    grid-template-areas:
      "top ."
      "text trailing"
      "bottom .";
    grid-template-rows: minmax(var(--tds-page-layout--title-start-space), max-content) auto auto;
  }

  .tds-page-title-trailing {
    -webkit-margin-before: 0;
    -webkit-margin-start: var(--tds-size--3x);
    align-items: center;
    display: flex;
    justify-content: flex-end;
            margin-block-start: 0;
            margin-inline-start: var(--tds-size--3x);
  }
}

@media (min-width:1200px) {
  .tds-page-layout--narrow-main {
    grid-template-areas:
      ". . title title title title title title title title . ."
      ". . main main main main main main main main . .";
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content 1fr;
  }

  /* Enable 12-column layouts on tablet/desktop sizes */
  .tds-page-layout--content-level-aside.tds-page-layout--narrow-main {
    grid-template-areas:
      "title title title title title title title title title title title title"
      "aside aside aside main main main main main main open open open";
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content 1fr;
  }

  .tds-page-layout--top-level-aside.tds-page-layout--narrow-main {
    grid-template-areas:
      "aside aside aside title title title title title title title title title"
      "aside aside aside main main main main main main open open open";
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: min-content 1fr;
  }
}

/**
 * Content
 */

.tds-page-main {
  grid-area: main;
}

@media (min-width:600px) {
  .tds-page-layout--top-level-aside .tds-page-aside {
    -webkit-margin-before: var(--tds-page-layout--title-start-space);
            margin-block-start: var(--tds-page-layout--title-start-space);
  }
}

.tds-pagination {
  --pagination-primary--display: initial;
  --pagination-primary-select--margin-horiz: var(--tds-size--1x);
  --pagination-secondary--display: none;

  text-align: center;
}

.tds-pagination,.tds-pagination-navigation {
  color: var(--tds-theme-foreground);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium);
}

.tds-pagination-navigation {
  line-height: normal;
}

/* TODO: combine with disabled in normalize.css in the Tonight release (AWSM-4915) */

.tds-pagination-navigation[aria-disabled=true] {
  box-shadow: 0 0 0 transparent;
  cursor: not-allowed;
  opacity: var(--tds-ui-opacity-50);
  pointer-events: none;
}

/* TODO: Replace pagination custom select styles with inline form-input-select - AWSM-5509 */

.tds-pagination select {
  background-color: transparent;
  border: 0;
  border-radius: var(--tds-border-radius--outline-only);
  color: var(--tds-theme-foreground);
  margin: auto;
}

@media (max-width:599px) {
  .tds-pagination-primary>select {
    display: block;
    margin: var(--tds-size--1x) auto;
  }
}

.tds-pagination .tds-pagination-current {
  display: inline-block;
  position: relative;
}

.tds-pagination-primary .tds-pagination-current {
  margin: 0 var(--tds-size--1x);
}

/* TODO: This is unnecessarily specific in order to create the correct UI without breaking
the existing UI component. */

.tds-pagination .tds-pagination-current select {
  -webkit-padding-end: var(--tds-size--3x);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
          padding-inline-end: var(--tds-size--3x);
  position: relative;
}

.tds-pagination-primary .tds-pagination-current select {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}

.tds-pagination-secondary .tds-pagination-current select {
  -webkit-padding-start: var(--tds-size--half);
          padding-inline-start: var(--tds-size--half);
}

.tds-pagination .tds-pagination-current select:focus {
  outline: var(--tds-outline--focus);
}

.tds-pagination-primary .tds-pagination-current select:focus {
  outline-offset: 2px;
}

.tds-pagination .tds-pagination-current select+.tds-icon {

  /* Visual offset to align small down chevron to capital characters */
  pointer-events: none;
  position: absolute;
  right: var(--tds-size--half);
  top: calc(50% - 5px);
  z-index: 0;
}

@media (max-width:599px) {
  /* Stop Zooming in on select elements */
  .tds-pagination select {
    font-size: var(--tds-size--2x);
  }
}

@media (min-width:600px) {

  .tds-pagination-primary .tds-pagination-current,.tds-pagination-primary>select {
    margin: 0 var(--tds-size--2x);
  }
}

.tds-pagination-primary {
  display: var(--pagination-primary--display);
  justify-content: space-around;
}

.tds-pagination-secondary {
  display: var(--pagination-secondary--display);
  inline-size: -moz-max-content;
  inline-size: max-content;
  white-space: nowrap;
}

.tds-pagination-secondary--value {
  color: var(--tds-theme-foreground);
}

.tds-pagination-navigation+.tds-pagination-navigation {
  -webkit-margin-start: var(--tds-size--3x);
          margin-inline-start: var(--tds-size--3x);
  position: relative;
}

.tds-pagination-navigation+.tds-pagination-navigation:before {
  background-color: var(--tds-theme-foreground-high-contrast);
  block-size: 100%;
  content: "";
  display: block;
  inline-size: 1px;
  left: -14px;
  position: absolute;
  top: 0;
}

[dir=rtl] .tds-pagination-navigation+.tds-pagination-navigation:before {
  left: auto;
  right: -14px;
}

@media (min-width:900px) {
  .tds-pagination {
    --pagination-primary-select--margin-horiz: var(--tds-size--2x);

    display: flex;
    justify-content: space-between;
  }

  .tds-pagination-primary {
    --pagination-primary--display: initial;

    inline-size: 100%;
  }

  .tds-pagination-secondary {
    --pagination-secondary--display: initial;
  }

  .tds-pagination-secondary label {
    color: var(--tds-theme-foreground);
  }

  .tds-pagination .tds-pagination-current select+.tds-icon {
    opacity: 1;
  }

  /* .tds-pagination .tds-pagination-current select + .tds-icon {
    right: var(--tds-size--1x);
    top: calc(50% - var(--tds-size--half));
  }
  .tds-pagination-current {
    display: inline-block;
    padding-inline-end: var(--tds-size--2x);
    position: relative;
  } */
}

/* TODO: All Pagination examples are set to font-size: 12px; / line-height: 24px;
   Resolve this in Tonight / Q4 / TDS 6 / AWSM-4928
*/

.tds-density--dense .tds-pagination,.tds-density--dense .tds-pagination p {
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--30);
}

@media (min-width:900px) {
  .tds-density--dense .tds-pagination {
    --pagination-primary-select--margin-horiz: var(--tds-size--2x);
  }
}

.tds-pagination--show-numbers .tds-pagination-primary {
  --pagination-primary--display: flex;

  justify-content: center;
}

.tds-pagination--show-numbers .tds-pagination-current {
  line-height: 16px;
  margin: 0 var(--pagination-primary-select--margin-horiz);
}

.tds-pagination--show-numbers .tds-pagination-secondary .tds-pagination-current {
  margin: 0;
}

.tds-pagination--show-numbers .tds-pagination-navigation {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
}

.tds-selector {
  --tds-selector-font-color--selected: var(--tds-color-white);
  grid-gap: var(--tds-size--1x) calc(var(--tds-size--1x)*1.5);

  display: grid;

  /* --tds-column-count available as an override for other classes (eg. date-filter) */
  grid-template-columns: repeat(var(--tds-column-count, auto-fill), var(--tds-column-width, minmax(200px, 1fr)));
  justify-items: stretch;
  padding: var(--tds-size--1x) 0 12px;
}

.tds-density--dense .tds-selector {
  --tds-height--pill: var(--tds-size--4x);
}

.tds-scrim--black:is(.tds-theme--replicant,.tds-theme--marketing) .tds-selector,:is(.tds-theme--replicant,.tds-theme--marketing) .tds-scrim--black .tds-selector {
  --tds-selector-font-color--selected: var(--tds-color-grey-20);
}

.tds-selector--col4 {
  --tds-column-count: 4;
  --tds-column-width: minmax(max-content, 1fr);
}

/* Options */

.tds-selector-input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.tds-selector-label {
  align-items: center;
  block-size: var(--tds-height--pill);
  border-radius: var(--tds-border-radius--pill);
  cursor: pointer;
  display: flex;
  justify-content: center;
  padding: 0 calc(var(--tds-size--1x)*1.5);
  text-align: center;
  transition: background-color .3s ease,color .3s ease,opacity .3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tds-selector-label:hover {
  background-color: var(--tds-theme-background-container);
}

.tds-selector-input:checked+.tds-selector-label {
  background-color: var(--tds-theme-primary);
  color: var(--tds-selector-font-color--selected);
  font-weight: var(--tds-font-weight--medium);
}

.tds-selector-input:checked+.tds-selector-label:hover {
  background-color: var(--tds-theme-primary-highlight);
}

/* stylelint-disable */

.tds-selector-input:focus-visible+.tds-selector-label {
  outline: var(--tds-outline--focus);
}

/* While duplicating the line above, they cannot be combined */

.tds--indicate-focus .tds-selector-input:focus+.tds-selector-label {
  outline: var(--tds-outline--focus);
}

.tds-stepper {
  --tds-stepper--stroke: calc(var(--tds-size--half)/2);
  --tds-stepper--circle-stroke: calc(var(--tds-size--half)/2);
  --tds-stepper--line-top: 0;
  --tds-stepper--line-left: calc(var(--tds-icon--size)/2 - var(--tds-stepper--stroke)/2);
  --tds-stepper--mask-color: var(--tds-theme-background, var(--tds-color-white));
  --tds-stepper--icon-color: var(--tds-theme-border);
  --tds-stepper--text-color: var(--tds-theme-foreground-low-contrast);
  --tds-stepper--line-mask-end: calc(50% + var(--tds-icon--size)/2);

  /* Deprecated in v7. Will be removed in TDS v9 */
  --tds-stepper--list-item-height: var(--tds-icon--size);

  position: relative;
}

.tds-modal .tds-stepper {
  --tds-stepper--mask-color: var(--tds-theme-background-dialog, var(--tds-theme-background, var(--tds-color-white)));
}

/* Stepper Item -- Line */

.tds-stepper:before {
  background-color: var(--tds-color--tertiary-highlight);
  block-size: 100%;
  content: "";
  inline-size: var(--tds-stepper--stroke);
  left: var(--tds-stepper--line-left);
  position: absolute;
  top: var(--tds-stepper--line-top);
}

[dir=rtl] .tds-stepper:before {
  right: var(--tds-stepper--line-left);
}

/* Stepper Item */

.tds-stepper-item,.tds-stepper-item-action {
  align-items: start;
  border-radius: var(--tds-size--1x);
  color: var(--tds-stepper--icon-color);
  -moz-column-gap: var(--tds-size--2x);
       column-gap: var(--tds-size--2x);
  display: grid;
  grid-template: "circle text" min-content / var(--tds-icon--size) max-content;
  position: relative;
  text-align: start;
}

.tds-stepper-item:not(:first-of-type) {
  -webkit-margin-before: var(--tds-size--3x);
          margin-block-start: var(--tds-size--3x);
}

.tds-stepper-item-action {
  grid-area: circle / circle / text / text;
}

/* Stepper Item -- Focus */

.tds--indicate-focus .tds-stepper-item-action:focus {
  outline: var(--tds-outline--focus);
  z-index: 1; /* Have to increase z-index to go on top of mask */
}

/*  Stepper Item -- Icon  */

.tds-stepper-item .tds-icon {
  background-color: var(--tds-stepper--mask-color);
  grid-area: circle;
}

/* Stepper Item -- Text */

.tds-stepper-item-text {
  -webkit-padding-end: 3px;
  align-items: center;
  color: var(--tds-stepper--text-color);
  display: flex;
  grid-area: text;
  min-block-size: var(--tds-icon--size);
          padding-inline-end: 3px;
}

/*  Stepper Item State -- Current  */

.tds-stepper-item--current {
  --tds-stepper--circle-stroke: var(--tds-size--half);
  --tds-stepper--icon-color: var(--tds-theme-foreground-low-contrast);
  --tds-stepper--text-color: var(--tds-theme-foreground-high-contrast);
}

/*  Stepper Item State -- Complete  */

.tds-stepper-item--complete {
  --tds-stepper--icon-color: var(--tds-color-green);
}

/*  Stepper Item State -- Disabled  */

.tds-stepper-item--disabled {
  --tds-stepper--icon-color: var(--tds-color--tertiary-highlight);
  --tds-stepper--text-color: var(--tds-color--tertiary-highlight);
}

/*  Stepper Item State -- Error  */

.tds-stepper-item--error {
  --tds-stepper--icon-color: var(--tds-theme-secondary-negative);
  --tds-stepper--text-color: var(--tds-theme-secondary-negative);
}

/* Stepper Item -- Circle */

.tds-stepper-item-action:before,.tds-stepper-item:before {

  /* Mask */
  background-color: var(--tds-stepper--mask-color);
  block-size: var(--tds-size--2x);
  border: var(--tds-size--half) solid var(--tds-stepper--mask-color);
  border-radius: 50%;

  /* Circle */
  box-shadow: inset 0 0 0 var(--tds-stepper--circle-stroke) currentColor;
  box-sizing: unset;
  content: "";
  grid-area: circle;
  inline-size: var(--tds-size--2x);
}

@media (min-width:600px) {
  .tds-stepper:not(.tds-stepper--vertical) {
    --tds-stepper--icon-grid-area-height: calc(var(--tds-size--4x) - var(--tds-size--half));
    --tds-stepper--text-grid-area-height: min-content;
    --tds-stepper--line-top:
      calc(var(--tds-stepper--icon-grid-area-height)/2 - var(--tds-stepper--stroke)/2);
    --tds-stepper--line-left: 0;
    --tds-setpper-item--text-width: calc(var(--tds-size)*12);

    display: inline-flex;
  }

  .tds-stepper.tds-stepper--width-full {
    display: flex;
  }

  /* Stepper -- Line */
  .tds-stepper:not(.tds-stepper--vertical):before {
    writing-mode: vertical-lr;
  }

  .tds-stepper.tds-stepper--vertical:before {
    /* minor adjustment from mobile version to account for slightly larger min-size tap-targets on items */
    block-size: calc(100% - 2px);
  }

  /* Stepper Item */

  .tds-stepper--width-full .tds-stepper-item {
    flex-basis: 0;
    flex-grow: 1;
  }

  .tds-stepper:not(.tds-stepper--vertical) :is(.tds-stepper-item,.tds-stepper-item-action) {
    grid-template:
      "circle" var(--tds-stepper--icon-grid-area-height)
      "text" var(--tds-stepper--text-grid-area-height) / minmax(min-content, 1fr);
    justify-items: center;
  }

  /* Stepper Item -- Remove some column gap for hover background/padding */
  .tds-stepper.tds-stepper--vertical .tds-stepper-item-action {
    -moz-column-gap: var(--tds-size--half);
         column-gap: var(--tds-size--half);
  }

  /* Stepper Item -- Added space for focus outline */
  .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:not(:first-of-type) {
    -webkit-margin-before: unset;
    -webkit-margin-start: var(--tds-size--1x);
            margin-block-start: unset;
            margin-inline-start: var(--tds-size--1x);
  }

  /* Stepper Item -- Circle Mask */
  .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:before {
    border-width: var(--tds-size--1x);
  }

  .tds-stepper.tds-stepper--vertical :is(.tds-stepper-item,.tds-stepper-item-action):before {
    /* minor adjustment from mobile version to account for slightly larger min-size tap-targets on items */
    -webkit-margin-before: 2px;
            margin-block-start: 2px;
  }

  /* Stepper Item -- Mask for line left of first li and and right of last li */
  .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:is(:first-of-type,:last-of-type):after {
    background-color: var(--tds-stepper--mask-color);
    block-size: calc(var(--tds-stepper--stroke) + 2px); /* Added extra to cover up outline */
    content: "";
    inline-size: calc(50% - var(--tds-icon--size)/2);
    position: absolute;
    top: calc(var(--tds-stepper--line-top) - 1px); /* Move up a little to cover up outline */
  }

  .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:first-of-type:after {
    left: 0;
  }

  .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:last-of-type:after {
    left: var(--tds-stepper--line-mask-end);
  }

  [dir=rtl] .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:first-of-type:after {
    left: unset;
    right: 0;
  }

  [dir=rtl] .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item:last-of-type:after {
    left: unset;
    right: var(--tds-stepper--line-mask-end);
  }

  /* Stepper Item -- Text */
  .tds-stepper-item-text {
    -webkit-padding-after: var(--tds-size--half);
    -webkit-padding-before: var(--tds-size--half);
    max-inline-size: var(--tds-setpper-item--text-width);
    min-inline-size: var(--tds-setpper-item--text-width);
    overflow: hidden;
    overflow-wrap: break-word;
            padding-block-end: var(--tds-size--half);
            padding-block-start: var(--tds-size--half);
    transition: color .33s ease,background-color .33s ease;
  }

  .tds-stepper-item-action .tds-stepper-item-text {
    border-radius: var(--tds-border-radius--pill);
    padding: var(--tds-size--half) 12px;
  }

  .tds-stepper--width-full .tds-stepper-item-text,.tds-stepper--width-large .tds-stepper-item-text {
    --tds-setpper-item--text-width: calc(var(--tds-size)*17);
  }

  .tds-stepper--width-full .tds-stepper-item-text {
    max-inline-size: unset;
  }

  .tds-stepper:not(.tds-stepper--vertical) .tds-stepper-item-text {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box; /* stylelint-disable-line */
    text-align: center;
  }

  /* Stepper Item -- Hover */
  .tds-stepper-item:not(.tds-stepper-item--disabled) .tds-stepper-item-action:hover .tds-stepper-item-text {
    background-color: var(--tds-theme-background-container);
  }

  .tds-stepper-item:not(.tds-stepper-item--disabled):not(.tds-stepper-item--error) .tds-stepper-item-action:hover .tds-stepper-item-text {
    --tds-stepper--text-color: var(--tds-theme-foreground-high-contrast);
  }
}

.tds-sidenav {
  --tds-nav-item--color: var(--tds-theme-foreground-low-contrast);
  --tds-sidenav--content-buffer: var(--tds-size--3x);
  --tds-sidenav--item-padding-inline: var(--tds-size--2x);
  -webkit-margin-end: calc(var(--tds-sidenav--item-padding-inline)*-1);
  -webkit-margin-start: calc(var(--tds-sidenav--item-padding-inline)*-1);
  -webkit-padding-end: var(--tds-sidenav--content-buffer);

  inline-size: calc(100% + var(--tds-sidenav--item-padding-inline)*2 + var(--tds-sidenav--content-buffer));
          margin-inline-end: calc(var(--tds-sidenav--item-padding-inline)*-1);
          margin-inline-start: calc(var(--tds-sidenav--item-padding-inline)*-1);
          padding-inline-end: var(--tds-sidenav--content-buffer);
}

.tds-sidenav--sticky {
  --tds-sidenav--scroll-buffer: var(--tds-size--3x);
  -webkit-margin-after: calc(var(--tds-sidenav--scroll-buffer)*-1);
  -webkit-margin-before: calc(var(--tds-sidenav--scroll-buffer)*-1);
  -webkit-padding-after: var(--tds-sidenav--scroll-buffer);
  -webkit-padding-before: var(--tds-sidenav--scroll-buffer);

  bottom: 0;
          margin-block-end: calc(var(--tds-sidenav--scroll-buffer)*-1);
          margin-block-start: calc(var(--tds-sidenav--scroll-buffer)*-1);
  max-block-size: 100vh;
  overflow-y: auto;
          padding-block-end: var(--tds-sidenav--scroll-buffer);
          padding-block-start: var(--tds-sidenav--scroll-buffer);
  position: sticky;
  top: 0;
}

.tds-sidenav .tds-site-nav-items--vertical .tds-site-nav-item-text {
  -webkit-margin-end: var(--tds-size--1x);
  -webkit-margin-start: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
          margin-inline-start: var(--tds-size--1x);
}

.tds-sidenav .tds-sidenav-group {
  display: none;
  font-size: var(--tds-font-size--20);
}

.tds-sidenav .tds-site-nav-items--vertical .tds-site-nav-item {
  block-size: var(--tds-size--5x);
}

.tds-sidenav .tds-site-nav-items--vertical .tds-sidenav-group .tds-site-nav-item {
  -webkit-padding-start: var(--tds-sidenav--item-padding-inline);
  block-size: var(--tds-size--4x);
          padding-inline-start: var(--tds-sidenav--item-padding-inline);
}

.tds-site-nav-item+.tds-sidenav-group {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.tds-sidenav .tds-site-nav-item.active {
  --tds-nav-item--color: var(--tds-theme-foreground-high-contrast);
}

.tds-sidenav .tds-site-nav-item .tds-icon:first-child {
  -webkit-margin-start: var(--tds-size--half);
          margin-inline-start: var(--tds-size--half);
}

.tds-sidenav .tds-site-nav-item .tds-icon:last-child {
  -webkit-margin-end: var(--tds-size--1x);
          margin-inline-end: var(--tds-size--1x);
}

[dir=rtl] .tds-sidenav .tds-site-nav-item .tds-icon:last-child {
  transform: rotateY(180deg);
}

.tds-sidenav .tds-site-nav-item.active .tds-icon:last-child {
  transform: rotateX(180deg);
}

[dir=rtl] .tds-sidenav .tds-site-nav-item.active .tds-icon:last-child {
  transform: rotateY(180deg) rotateX(180deg);
}

.tds-site-nav-item.active+.tds-sidenav-group {
  display: block;
}

/* TODO: Refactor imports for site-header */

.tds-site-footer {
  font-size: var(--tds-font-size--20);
  inline-size: 100%;
}

.tds-site-footer--sticky {
  bottom: 0;
  position: sticky;
}

.tds-footer-nav {
  inline-size: 100%;
}

.tds-footer-nav>ul {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.tds-site-footer--align_start .tds-footer-nav>ul {
  justify-content: flex-start;
}

.tds-footer-nav>ul>li {
  padding: var(--tds-size--half) 0;
}

.tds-footer-nav .tds-footer-item {
  color: var(--tds-theme-foreground-low-contrast);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium);
}

.tds-footer-item .tds-link:not(.tds--disabled):not(.tds-link--primary) {
  box-shadow: none;
  color: var(--tds-theme-foreground-low-contrast);
}

.tds-footer-item .tds-link:not(.tds--disabled):not(.tds-link--primary):hover {
  box-shadow: none;
}

@media (min-width:600px) {
  .tds-footer-nav>ul {
    flex-flow: row wrap;
  }

  .tds-footer-nav>ul>li {
    -webkit-padding-before: var(--tds-size--1x);
    -webkit-padding-after: var(--tds-size--1x);
            padding-block-end: var(--tds-size--1x);
            padding-block-start: var(--tds-size--1x);
  }

  .tds-footer-nav>ul>li:first-child {
    -webkit-padding-start: 0;
            padding-inline-start: 0;
  }

  .tds-footer-nav>ul>li:last-child {
    -webkit-padding-end: 0;
            padding-inline-end: 0;
  }
}

.tds-component-preview,:root {
  --tds-site-header--height: var(--tds-size--7x);
}

/** Header Alignment --
  * ---------------------------------------------------------- */

.tds-site-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

.tds-global-menu,.tds-site-header {
  inline-size: 100%;
}

.tds-site-header--sticky {
  position: sticky;
  top: 0;
}

.tds-site-header .tds-align--start {
  -webkit-padding-start: var(--tds-size--1x);
  justify-content: flex-start;
          padding-inline-start: var(--tds-size--1x);
}

.tds-site-header .tds-align--center {
  -webkit-padding-end: var(--tds-size--1x);
  -webkit-padding-start: var(--tds-size--1x);
  justify-content: center;
          padding-inline-end: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}

.tds-site-header .tds-align--end {
  -webkit-padding-end: var(--tds-size--1x);
  justify-content: flex-end;
          padding-inline-end: var(--tds-size--1x);
}

@media (min-width:600px) {
  /* Combines with logo and nav item padding to match 36px in the content container */
  .tds-site-header .tds-align--start {
    -webkit-padding-start: 20px;
            padding-inline-start: 20px;
  }

  .tds-site-header .tds-align--end {
    -webkit-padding-end: 20px;
            padding-inline-end: 20px;
  }
}

/* Site Header skips tablet layout for the time-being */

@media (min-width:1200px) {
  .tds-site-header .tds-align--start {
    -webkit-padding-start: var(--tds-size--4x);
    flex-basis: 0;
    flex-grow: 1;
            padding-inline-start: var(--tds-size--4x);
  }

  .tds-site-header .tds-align--end {
    -webkit-padding-end: var(--tds-size--4x);
    flex-basis: 0;
    flex-grow: 1;
            padding-inline-end: var(--tds-size--4x);
  }
}

/* Specific spacing for SHL */

.tds-site-header-modal {
  -webkit-padding-after: var(--tds-size--6x);
          padding-block-end: var(--tds-size--6x);
}

.tds-site-header-modal .tds-modal-header {
  padding: 20px;
}

/* Header Logo + App Title */

.tds-site-logo {
  align-items: center;
  display: flex;
}

h1.tds-site-logo {
  padding: 0;
  position: relative;
}

/* TODO: Remove after stable icons are complete */

.tds-icon.tds-site-logo-icon path {
  transition: fill .33s ease;
}

.tds-site-header>.tds-site-logo {
  min-block-size: var(--tds-site-header--height);
}

.tds-site-logo-link {
  box-shadow: none;
  padding: 0 var(--tds-size--2x);
}

/* App Title */

.tds-site-logo-link,.tds-site-logo-link+.tds-site-app-title {
  align-items: center;
  display: inline-flex;
  min-block-size: var(--tds-size--4x);
}

.tds-site-logo-link+.tds-site-app-title {

  /* Visual correction to balance logo and label */
  -webkit-margin-start: calc(var(--tds-size--1x) + 2px);
  font-size: var(--tds-font-size--20);
  letter-spacing: 0;
  line-height: var(--tds-line-height--20);
          margin-inline-start: calc(var(--tds-size--1x) + 2px);
  padding: 0 var(--tds-size--1x);
  position: relative;
}

.tds-site-logo-link+.tds-site-app-title:before {
  background-color: var(--tds-theme-foreground-high-contrast);
  block-size: var(--tds-line-height--20);
  content: "";
  display: block;
  inline-size: 1px;
  left: calc(var(--tds-size--2x)*-1);
  margin: 0 var(--tds-size--1x);
  position: absolute;
}

[dir=rtl] .tds-site-logo-link+.tds-site-app-title:before {
  left: unset;
  right: calc(var(--tds-size--2x)*-1);
}

@media (min-width:600px) {
  .tds-site-logo-link+.tds-site-app-title {
    font-size: var(--tds-font-size--30);
    line-height: var(--tds-line-height--30);
  }

  .tds-site-logo-link+.tds-site-app-title:before {
    block-size: var(--tds-line-height--30);
  }
}

.tds-skip-to-content {
  align-items: center;
  font-size: var(--tds-font-size--20);
  line-height: 1.414;
  min-block-size: var(--tds-size--4x);
  padding: var(--tds-size--1x) var(--tds-size--2x);
  position: absolute;
  top: var(--tds-size--6x);
}

.tds-site-logo :focus {
  border-radius: 12px;
  outline: none;
}

.tds-site-logo :focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 0;
}

.tds--indicate-focus .tds-site-logo :focus {
  outline: var(--tds-outline--focus);
  outline-offset: 0;
}

/** Nav Items --
  * ---------------------------------------------------------- */

.tds-site-nav-item {
  --tds-nav-item--padding: var(--tds-size--1x);
  --tds-nav-item--width: auto;

  align-items: center;
  border-radius: var(--tds-border-radius--pill);
  color: var(--tds-nav-item--color);
  display: inline-flex;
  font-weight: var(--tds-font-weight--medium);
  inline-size: var(--tds-nav-item--width);
  min-block-size: var(--tds-size--4x);
  padding: var(--tds-size--half) var(--tds-size--1x);
  transition: color .33s ease,background-color .33s ease;
}

.tds-site-nav-items--vertical .tds-site-nav-item {
  inline-size: 100%;
}

.tds-site-nav-item.tds--highlighted {
  --tds-nav-item--color: var(--tds-theme-foreground-high-contrast);

  -webkit-backdrop-filter: blur(var(--tds-blur--button));

          backdrop-filter: blur(var(--tds-blur--button));
  background-color: var(--tds-theme-background-container-alt);
}

@media (hover:hover) {
  .tds-site-nav-item:where(:not(.tds-site-nav-item--read-only)):hover {
    --tds-nav-item--color: var(--tds-theme-foreground-high-contrast);

    -webkit-backdrop-filter: blur(var(--tds-blur--button));

            backdrop-filter: blur(var(--tds-blur--button));
    background-color: var(--tds-theme-background-container-alt);
  }

  .tds-site-nav-item.tds--highlighted:where(:not(.tds-site-nav-item--read-only):not(.tds-animate--backdrop)):hover {
    background-color: var(--tds-theme-background-container-alt-highlight);
  }
}

.tds-site-nav-item:focus {
  outline: none;
}

.tds-site-nav-item:focus-visible {
  outline: var(--tds-outline--focus);
}

.tds--indicate-focus .tds-site-nav-item:focus {
  outline: var(--tds-outline--focus);
}

/* Specific-Purpose nav items (menu & back links) */

.tds-modal-header .tds-nav-back {
  background: none;
  font-size: 12px;
  margin: 4px 0;

  /* Fix optical centering vertically */
  position: relative;
  top: 1px;
}

@media (max-width:599px) {
  .tds-nav-menu {
    font-size: 12px;
    min-block-size: 28px;
    padding: 0 var(--tds-size--1x);
  }
}

/* Animated */

.tds-site-nav-item.tds-animate--backdrop {
  -webkit-backdrop-filter: unset;
          backdrop-filter: unset;
  background-color: transparent;
}

/* Properties to be set via js */

.tds-animate--backdrop-backdrop {
  -webkit-backdrop-filter: blur(var(--tds-blur--button));
          backdrop-filter: blur(var(--tds-blur--button));
  background-color: var(--tds-theme-background-container-alt);

  /* TODO: AWSM-3345: split this into generic styles to go into tds-core vs here */

  /* Note: height and width can't default to zero, otherwise Safari will ignore the backdrop-filter on the first render */
  block-size: var(--tds-animate-backdrop-height, 1px);
  border-radius: var(--tds-border-radius--pill);
  display: block;
  inline-size: var(--tds-animate-backdrop-width, 1px);

  /* left/right here are used by js to set posiioning, which ignores logical props */

  /* stylelint-disable-next-line */
  left: var(--tds-animate-backdrop-left, 0);
  opacity: var(--tds-animate-backdrop-opacity, 0);
  position: absolute;

  /* stylelint-disable-next-line */
  top: var(--tds-animate-backdrop-top, 0);
  transition: var(--tds-animate-backdrop-transition, opacity .5s ease, visibility 0s 0s);

  /* Note: Visibility needs to not have a default value here, otherwise it will override the tokenized value */
  visibility: var(--tds-animate-backdrop-visibility);
  z-index: -1;
}

.tds-site-nav-item-text {
  color: var(--tds-nav-item--color);
  margin: 0 var(--tds-size--1x);
  transition: color .33s ease;
}

.tds-site-nav-items--vertical .tds-site-nav-item-text {
  flex-grow: 1;
  margin: 0 var(--tds-size--half);
  text-align: start;
}

.tds-nav-back .tds-site-nav-item-text {
  margin: 0;
}

/* If there's only an icon, tighten up the space to create a square pill */

.tds-site-nav-item .tds-icon:only-child {
  -webkit-margin-end: -4px;
  -webkit-margin-start: -4px;
          margin-inline-end: -4px;
          margin-inline-start: -4px;
}

/** Nav Items --
  * ---------------------------------------------------------- */

.tds-site-nav-items {
  align-items: center;
  display: flex;
  margin: 0;

  /* Handles the case where an animated backdrop is on the list, instead of a site-header */
  position: relative;
  transition: transform .5s ease;
  z-index: 1;
}

.tds-site-header>.tds-site-nav-items {
  min-block-size: var(--tds-site-header--height);
  position: static;
}

.tds-site-nav-items--vertical {
  align-items: normal;
  flex-direction: column;
}

.tds-site-nav-items--vertical>li:not(:last-child) {
  -webkit-margin-after: var(--tds-size--1x);
          margin-block-end: var(--tds-size--1x);
}

/**
 * Status Message
 */

.tds-status_msg {
  --tds-card--padding: var(--tds-padding--card--dense);

  display: flex;
  margin: var(--tds-size--3x) 0;
}

/* Inner Elements */

.tds-status_msg-heading {
  padding: 0;
}

.tds-status_msg :is(.tds-text--h6,.tds-text--h6,.tds-text--h6) {
  -webkit-padding-before: 0;
          padding-block-start: 0;
}

.tds-status_msg:not(.tds-card) .tds-card-body {
  -webkit-padding-after: 0;
  -webkit-padding-before: 0;
  -webkit-padding-start: calc(var(--tds-card--padding)/3);
          padding-block-end: 0;
          padding-block-start: 0;
          padding-inline-start: calc(var(--tds-card--padding)/3);
}

.tds-status_msg:not(.tds-card) .tds-icon+.tds-card-body {
  -webkit-padding-after: 2px;
  -webkit-padding-before: 2px;
          padding-block-end: 2px;
          padding-block-start: 2px;
}

.tds-component-preview,:root {
  --tds-switch_toggle--font-size: var(--tds-font-size--20);
  --tds-switch_toggle--size: 32px;
}

.tds-switch_toggle {
  --tds-switch_toggle--radius: calc(var(--tds-switch_toggle--size)/2);
  --tds-switch_toggle--spacer: var(--tds-size--1x);

  align-items: center;
  display: flex;
  inline-size: -moz-min-content;
  inline-size: min-content;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tds-switch_toggle * {
  cursor: pointer;
}

.tds-switch_toggle--large {
  --tds-switch_toggle--font-size: var(--tds-font-size--30);
  --tds-switch_toggle--size: 40px;
}

.tds-density--default,.tds-switch_toggle--medium {
  --tds-switch_toggle--font-size: var(--tds-font-size--20);
  --tds-switch_toggle--size: 32px;
}

.tds-density--dense,.tds-switch_toggle--small {
  --tds-switch_toggle--font-size: var(--tds-font-size--10);
  --tds-switch_toggle--size: 28px;
}

.tds--disabled .tds-switch_toggle-checkbox,.tds-switch_toggle-checkbox {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.tds-switch_toggle-track {
  background-color: var(--tds-theme-background-container-alt);
  block-size: var(--tds-switch_toggle--size);
  border-radius: var(--tds-switch_toggle--radius);
  display: block;
  inline-size: calc(var(--tds-switch_toggle--size)*2);
  position: relative;
  transition: background-color .5s ease;
}

.tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track {
  background-color: var(--tds-theme-primary);
}

.tds-switch_toggle-checkbox:focus-visible+.tds-switch_toggle-track {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

.tds--indicate-focus .tds-switch_toggle-checkbox:focus+.tds-switch_toggle-track {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

.tds-switch_toggle-btn {
  -webkit-margin-start: var(--tds-switch_toggle--spacer);
  -webkit-margin-end: var(--tds-switch_toggle--spacer);
  color: var(--tds-theme-foreground-high-contrast);
  font-size: var(--tds-switch_toggle--font-size);
  line-height: 1;
          margin-inline-end: var(--tds-switch_toggle--spacer);
          margin-inline-start: var(--tds-switch_toggle--spacer);
  text-transform: none;
  transition: color .5s ease;
}

.tds-switch_toggle-btn:nth-last-child(2) {
  order: -1;
}

.tds-switch_toggle--label_inside .tds-switch_toggle-btn {
  --tds-switch_toggle--spacer: 0;
  --tds-switch_toggle-btn--indent: 1px;

  align-items: center;
  block-size: 100%;
  display: flex;
  inline-size: calc(50% + var(--tds-switch_toggle-btn--indent));
  justify-content: center;
  position: absolute;
}

.tds-switch_toggle--large .tds-switch_toggle-btn {
  --tds-switch_toggle-btn--indent: 4px;
}

.tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
  left: 2px;
}

.tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
  right: 2px;
}

.tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-btn {
  color: var(--tds-color-white);
}

.tds-switch_toggle-track:after {
  /* Note:
   * In dark environments the default 'toggle' fill goes dark-grey
   * But for switches the fill gains a primary-colored background, making the default ugly
   */
  background-color: var(--tds-color-white);
  block-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
  border-radius: var(--tds-border-radius--circle);
  box-shadow: var(--tds-box-shadow--small);
  content: "";
  display: block;
  inline-size: calc(var(--tds-switch_toggle--size) - var(--tds-size--1x));
  margin: var(--tds-size--half);
  position: absolute;
  transform: translateX(0);
  transition: transform .5s var(--tds-bezier), color .5s var(--tds-bezier);
  z-index: 10;
}

.tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
  transform: translateX(var(--tds-switch_toggle--size));
}

[dir=rtl] .tds-switch_toggle--label_inside .tds-switch_toggle-checkbox~.tds-switch_toggle-track:after,[dir=rtl] .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
  transform: translateX(calc(var(--tds-switch_toggle--size)*-1));
}

[dir=rtl] .tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track:after {
  transform: translateX(0);
}

.tds-component-preview,:root {
  --tds-table--vertical-align: middle;
  --tds-table-background-color: transparent;
  --tds-table-border_color: var(--tds-color-grey-50);
  --tds-table-border_spacing: 0;
  --tds-table-border_width: 1px;
  --tds-table-caption-background-color: transparent;
  --tds-table-caption-top: 0;
  --tds-table-header-font_size: var(--tds-font-size--30);
  --tds-table-padding--horizontal: var(--tds-size--2x);
  --tds-table-padding--vertical: var(--tds-size--2x);
}

.tds-density--dense {
  --tds-table-border_spacing: 0;
  --tds-table-border_width: 1px;
  --tds-table-header-font_size: var(--tds-font-size--20);
  --tds-table-padding--horizontal: var(--tds-size--1x);
  --tds-table-padding--vertical: var(--tds-size--1x);
}

.tds-table--align_middle {
  --tds-table--vertical-align: middle;
}

.tds-table--align_top {
  --tds-table--vertical-align: top;
}

.tds-table--align_bottom {
  --tds-table--vertical-align: bottom;
}

.tds-table {
  border-collapse: collapse;
  border-spacing: var(--tds-table-border_spacing);
  font-size: var(--tds-font-size--30);
  inline-size: 100%;
  text-align: start;
}

.tds-table--bordered td,.tds-table--bordered th {
  border: var(--tds-table-border_width) solid var(--tds-theme-border);
}

.tds-table-caption {
  background-color: var(--tds-table-caption-background-color);
}

.tds-table-row td,.tds-table-row th {
  -webkit-padding-after: var(--tds-table-padding--vertical);
  -webkit-padding-before: var(--tds-table-padding--vertical);
  background-color: var(--tds-table-background-color);
  font-size: var(--tds-table-header-font_size);
          padding-block-end: var(--tds-table-padding--vertical);
          padding-block-start: var(--tds-table-padding--vertical);
  text-align: start;
  vertical-align: var(--tds-table--vertical-align);
}

.tds-table-row p {
  margin: 0;
}

.tds-table-col--selected,.tds-table-row--selected td,.tds-table-row--selected th {
  --tds-table-background-color: var(--tds-theme-background-container);
}

.tds-table--padded_cells td,.tds-table--padded_cells th {
  -webkit-padding-end: var(--tds-table-padding--horizontal);
  -webkit-padding-start: var(--tds-table-padding--horizontal);
          padding-inline-end: var(--tds-table-padding--horizontal);
          padding-inline-start: var(--tds-table-padding--horizontal);
}

.tds-table--thead_border .tds-table-head th {
  -webkit-border-after: var(--tds-table-border_width) solid var(--tds-theme-border);
          border-block-end: var(--tds-table-border_width) solid var(--tds-theme-border);
}

.tds-scrim--black {
  --tds-table-background-color: var(--tds-color-grey-15);
}

.tds-scrim--black .tds-table td,.tds-scrim--black .tds-table th {
  color: var(--tds-color-white);
}

.tds-table-head .tds-table-row th {
  color: var(--tds-theme-foreground);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--medium);
}

.tds-table--hoverable .tds-table-body .tds-table-row:hover td,.tds-table--hoverable .tds-table-body .tds-table-row:hover th {
  background-color: var(--tds-theme-background-container);
}

@media (max-width:599px) {
  .tds-table--responsive .tds-table {
    display: flex;
    flex-flow: row wrap;
  }

  .tds-table--responsive .tds-table-caption {
    -webkit-border-after: 1px solid var(--tds-color-grey-50);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            border-block-end: 1px solid var(--tds-color-grey-50);
    padding: var(--tds-size--2x);
    position: sticky;
    top: var(--tds-table-caption-top);
  }

  .tds-table--responsive .tds-table-caption--white {
    --tds-table-caption-background-color: hsla(0,0%,100%,.5);
  }

  .tds-table--responsive .tds-table-caption--light {
    --tds-table-caption-background-color: hsla(0,0%,49%,.5);
  }

  .tds-table--responsive .tds-table-caption--black {
    --tds-table-caption-background-color: rgba(0,0,0,.5);
  }

  .tds-table--responsive .tds-table-caption h1,.tds-table--responsive .tds-table-caption h2,.tds-table--responsive .tds-table-caption h3,.tds-table--responsive .tds-table-caption h4,.tds-table--responsive .tds-table-caption h5,.tds-table--responsive .tds-table-caption h6 {
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }

  .tds-table--responsive .tds-table-body,.tds-table--responsive .tds-table-foot,.tds-table--responsive .tds-table-head,.tds-table--responsive .tds-table-row {
    display: block;
    max-inline-size: calc(100vw - var(--tds-size--3x)*2);
    overflow: scroll;
  }

  .tds-table--responsive .tds-table-row td {
    -webkit-padding-after: 0;
    display: inline-flex;
    flex-flow: row wrap;
    inline-size: 100%;
            padding-block-end: 0;
  }

  .tds-table--bordered .tds-table-row {
    -webkit-padding-before: 0;
    -webkit-padding-end: 0;
    -webkit-margin-after: var(--tds-size--1x);
            margin-block-end: var(--tds-size--1x);
            padding-block-start: 0;
            padding-inline-end: 0;
  }

  .tds-table--responsive .tds-table-head {
    left: -9999px;
    position: absolute;
    top: -9999px;
  }

  .tds-table--responsive td:before,.tds-table--responsive th:before {
    content: var(--columnHeader) ": ";
    display: block;
    font-family: var(--tds-font-family--combined);
    font-size: var(--tds-font-size--40);
    font-weight: var(--tds-font-weight--medium);
    inline-size: 100%;
    line-height: var(--tds-line-height--40);
    max-inline-size: 100%;
    min-inline-size: 100%;
  }

  .tds-table-responsive .tds-table-row {
    -webkit-padding-before: var(--tds-size--2x);
    -webkit-padding-after: var(--tds-size--2x);
    -webkit-border-after: 1px solid var(--tds-color-grey-50);
            border-block-end: 1px solid var(--tds-color-grey-50);
            padding-block-end: var(--tds-size--2x);
            padding-block-start: var(--tds-size--2x);
  }

  .tds-table--responsive.tds-table--padded_cells th {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }

  .tds-table--responsive .tds-table-body th:first-child {
    font-weight: 400;
  }
}

@media (min-width:600px) {
  .tds-table--row_border .tds-table-body td,.tds-table--row_border .tds-table-body th {
    -webkit-border-before: var(--tds-table-border_width) solid var(--tds-theme-border);
            border-block-start: var(--tds-table-border_width) solid var(--tds-theme-border);
  }

  .tds-table--striped .tds-table-body>.tds-table-row:nth-child(odd)>td,.tds-table--striped .tds-table-body>.tds-table-row:nth-child(odd)>th {
    --tds-table-background-color: var(--tds-color--tertiary-highlight);
  }
}

/**
 * DEPRECATED
 * See AWSM-3370. Consumers should now use the .tds-data-table pattern
 * (will be removed in TDS 6)
 */

.tds-table--data {
  font-variant-numeric: tabular-nums;
}

.tds-component-preview,:root {
  --tds-table-deux-table-border-width: 1px;
  --tds-table-deux-table-cell-align-items: normal;
  --tds-table-deux-table-cell-before-padding-block-end: 0;
  --tds-table-deux-table-cell-padding-horizontal: var(--tds-size--1x);
  --tds-table-deux-table-cell-padding-vertical: var(--tds-size--1x);
  --tds-table-deux-table-cell-position: static;
  --tds-table-deux-table-cell-vertical-align: middle;
  --tds-table-deux-table-column-inline-size: auto;
  --tds-table-deux-table-column-min-inline-size: 0;
  --tds-table-deux-table-header-font-size: var(--tds-table-header-font_size);
  --tds-table-deux-table-header-font-weight: var(--tds-font-weight--book);
  --tds-table-deux-table-header-line-height: var(--tds-base-line_height);
}

.tds-table-deux-wrapper {
  -webkit-margin-end: calc(var(--tds-size--1x)*-1);
  -webkit-margin-start: calc(var(--tds-size--1x)*-1);
  inline-size: calc(100% + var(--tds-size--2x));
          margin-inline-end: calc(var(--tds-size--1x)*-1);
          margin-inline-start: calc(var(--tds-size--1x)*-1);
  overflow-x: auto;
}

.tds-table-deux {
  --tds-table-deux-table-cell-border-block-end: var(--tds-table-deux-table-border-width) solid var(--tds-theme-border-low-contrast);
  --tds-table-deux-table-cell-border-block-start: none;

  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--tds-font-size--30);
  min-inline-size: 100%;
  text-align: start;
}

.tds-table-deux-head {
  --tds-table-deux-table-cell-padding-vertical: calc(var(--tds-size--1x) + var(--tds-size--half));
}

.tds-table-deux-foot {
  --tds-table-deux-table-cell-border-block-end: none;
  --tds-table-deux-table-cell-padding-vertical: calc(var(--tds-size--1x) + var(--tds-size--half));

  position: var(--tds-table-deux-table-cell-position);
}

.tds-table-deux-column {
  inline-size: var(--tds-table-deux-table-column-inline-size);
  min-inline-size: var(--tds-table-deux-table-column-min-inline-size);
}

.tds-table-deux--grouped-row .tds-table-deux-column:first-child {
  --tds-table-deux-table-column-inline-size: 40%;
  --tds-table-deux-table-column-min-inline-size: 20ch;
}

.tds-table-deux-row td,.tds-table-deux-row th {
  -webkit-border-after: var(--tds-table-deux-table-cell-border-block-end);
  -webkit-padding-after: var(--tds-table-deux-table-cell-padding-vertical);
  -webkit-padding-before: var(--tds-table-deux-table-cell-padding-vertical);
  -webkit-padding-end: var(--tds-table-deux-table-cell-padding-horizontal);
  -webkit-padding-start: var(--tds-table-deux-table-cell-padding-horizontal);
          border-block-end: var(--tds-table-deux-table-cell-border-block-end);
  line-height: var(--tds-base-line_height);
  min-inline-size: 12ch;
          padding-block-end: var(--tds-table-deux-table-cell-padding-vertical);
          padding-block-start: var(--tds-table-deux-table-cell-padding-vertical);
          padding-inline-end: var(--tds-table-deux-table-cell-padding-horizontal);
          padding-inline-start: var(--tds-table-deux-table-cell-padding-horizontal);
  position: var(--tds-table-deux-table-cell-position);
  text-align: start;
  vertical-align: var(--tds-table-deux-table-cell-vertical-align);
}

.tds-table-deux-column--selected,.tds-table-deux-row--selected td,.tds-table-deux-row--selected th {
  /* Setting a custom property for a column element will not cascade to the td or th. */
  background-color: var(--tds-theme-background-container-highlight);
}

.tds-table-deux-row td {
  -webkit-border-before: var(--tds-table-deux-table-cell-border-block-start);
  align-items: var(--tds-table-deux-table-cell-align-items);
          border-block-start: var(--tds-table-deux-table-cell-border-block-start);
  font-size: var(--tds-font-size--30);
}

.tds-table-deux-row td:before,.tds-table-deux-row th:before {
  -webkit-padding-after: var(--tds-table-deux-table-cell-before-padding-block-end);
  color: var(--tds-heading--color);
  display: block;
  font-weight: var(--tds-font-weight--medium);
          padding-block-end: var(--tds-table-deux-table-cell-before-padding-block-end);
}

.tds-table-deux-row td:first-child {
  -webkit-border-before: none;
          border-block-start: none;
}

.tds-table-deux-row th {
  -webkit-border-before: var(--tds-table-deux-table-cell-border-block-start);
          border-block-start: var(--tds-table-deux-table-cell-border-block-start);
  color: var(--tds-heading--color);
  font-size: var(--tds-table-deux-table-header-font-size);
  font-weight: var(--tds-table-deux-table-header-font-weight);
  line-height: var(--tds-table-deux-table-header-line-height);
}

.tds-table-deux-row th.tds-th--caption,.tds-th--caption {
  align-items: var(--tds-table-deux-table-cell-align-items);
  color: var(--tds-caption--color);
  font-size: var(--tds-font-size--20);
  font-weight: var(--tds-font-weight--medium);
}

.tds-table-deux-row th:first-child:after {
  background: var(--tds-scrim--background);
  bottom: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 1px;
  transition: background-color .3s ease;

  /* Should stack behind the ::before element on sticky headers,
  that way a sticky + sortable header gets the right background on hover */
  z-index: -2;
}

.tds-table-deux-row th:not(.tds-th--caption) {
  --tds-table-deux-table-header-font-weight: var(--tds-font-weight--medium);
}

.tds-table-deux--sticky-first-col .tds-table-deux-row th:first-child,.tds-table-deux--sticky-first-col+.tds-table-deux-foot {
  --tds-table-deux-table-cell-position: sticky;

  left: 0;
  z-index: 1;
}

.tds-table-deux--sticky-first-col+.tds-table-deux-foot {
  --tds-table-deux-table-foot-display: block;

  padding: calc(var(--tds-size--1x) + var(--tds-size--half)) var(--tds-size--1x);
}

[dir=rtl] .tds-table-deux--sticky-first-col .tds-table-deux-row th:first-child {
  left: auto;
  right: 0;
}

.tds-table-deux--sticky-first-col .tds-table-deux-row th:first-child:after {
  content: "";
}

.tds-table-deux--align-top {
  --tds-table-deux-vertical-align: top;
}

.tds-table-deux--align-bottom {
  --tds-table-deux-vertical-align: bottom;
}

@media (max-width:599px) {
  .tds-table-deux[class*=-stacked-list] {
    --tds-table-deux-table-cell-border-block-end: none;
    --tds-table-deux-table-cell-last-child-padding-block-end: var(--tds-size--3x);
    --tds-table-deux-table-cell-padding-horizontal: 0;
    --tds-table-deux-table-cell-position: static;
    --tds-table-deux-table-header-first-child-margin-block-start: 0;
    --tds-table-deux-table-header-font-size: var(--tds-font-size--40);
    --tds-table-deux-table-header-line-height: var(--tds-line-height--20);
    -webkit-padding-end: var(--tds-size--1x);
    -webkit-padding-start: var(--tds-size--1x);

    display: flex;
    flex-flow: row wrap;
            padding-inline-end: var(--tds-size--1x);
            padding-inline-start: var(--tds-size--1x);
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-head {
    left: -9999px;
    position: absolute;
    top: -9999px;
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-body,.tds-table-deux[class*=-stacked-list] .tds-table-deux-foot,.tds-table-deux[class*=-stacked-list] .tds-table-deux-head,.tds-table-deux[class*=-stacked-list] .tds-table-deux-row {
    display: block;
    inline-size: 100%;
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-row td,.tds-table-deux[class*=-stacked-list] .tds-table-deux-row th {
    display: inline-flex;
    inline-size: 100%;
  }

  .tds-table-deux--vertical-stacked-list[class*=-stacked-list] {
    --tds-table-deux-table-cell-before-padding-block-end: var(--tds-size--half);
  }

  .tds-table-deux--vertical-stacked-list[class*=-stacked-list] .tds-table-deux-row td,.tds-table-deux--vertical-stacked-list[class*=-stacked-list] .tds-table-deux-row th.tds-th--caption {
    flex-flow: column nowrap;
  }

  .tds-table-deux--vertical-stacked-list[class*=-stacked-list] .tds-table-deux-row td:before,.tds-table-deux--vertical-stacked-list[class*=-stacked-list] .tds-table-deux-row th:before {
    inline-size: 100%;
  }

  .tds-table-deux--horizontal-stacked-list[class*=-stacked-list] {
    --tds-table-deux-table-cell-align-items: center;
  }

  .tds-table-deux--horizontal-stacked-list[class*=-stacked-list] .tds-table-deux-row td,.tds-table-deux--horizontal-stacked-list[class*=-stacked-list] .tds-table-deux-row th.tds-th--caption {
    justify-content: space-between;
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-row td:first-child {
    -webkit-padding-before: var(--tds-size--3x);
            padding-block-start: var(--tds-size--3x);
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-row th:first-child {
    -webkit-margin-before: var(--tds-table-deux-table-header-first-child-margin-block-start);
            margin-block-start: var(--tds-table-deux-table-header-first-child-margin-block-start);
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-row td:last-child {
    -webkit-border-after: var(--tds-table-deux-table-border-width) solid var(--tds-theme-border-low-contrast);
    -webkit-padding-after: var(--tds-table-deux-table-cell-last-child-padding-block-end);
            border-block-end: var(--tds-table-deux-table-border-width) solid var(--tds-theme-border-low-contrast);
            padding-block-end: var(--tds-table-deux-table-cell-last-child-padding-block-end);
  }

  .tds-table-deux[class*=-stacked-list].tds-table-deux--grouped-row .tds-table-deux-row th:not(.tds-th--caption) {
    --tds-table-deux-table-cell-border-block-start: var(--tds-table-deux-table-border-width) solid var(--tds-theme-border-low-contrast);
    --tds-table-deux-table-header-first-child-margin-block-start: var(--tds-size--2x);

    -webkit-padding-before: var(--tds-size--3x);

            padding-block-start: var(--tds-size--3x);
  }

  .tds-table-deux[class*=-stacked-list].tds-table-deux--grouped-row .tds-table-deux-row:first-child th {
    --tds-table-deux-table-header-first-child-margin-block-start: 0;
  }

  .tds-table-deux[class*=-stacked-list].tds-table-deux--grouped-row {
    --tds-table-deux-table-cell-last-child-padding-block-end: var(--tds-size--1x);
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-row td:empty {
    display: none;
  }

  .tds-table-deux[class*=-stacked-list]:not(.tds-table-deux--grouped-row) {
    --tds-table-deux-table-header-last-child-padding-block-end: var(--tds-size--3x);
  }

  .tds-table-deux[class*=-stacked-list]:not(.tds-table-deux--grouped-row) .tds-table-deux-row th:first-child {
    -webkit-padding-before: var(--tds-size--3x);
            padding-block-start: var(--tds-size--3x);
  }

  .tds-table-deux--grouped-row[class*=-stacked-list] .tds-table-deux-row:last-child {
    --tds-table-deux-table-cell-last-child-padding-block-end: var(--tds-size--3x);
  }

  .tds-table-deux[class*=-stacked-list].tds-table-deux--grouped-row .tds-table-deux-row td:last-child {
    -webkit-border-after: none;
            border-block-end: none;
  }

  .tds-table-deux[class*=-stacked-list].tds-table-deux--grouped-row .tds-table-deux-row:last-child td:last-child {
    -webkit-border-after: var(--tds-table-deux-table-border-width) solid var(--tds-theme-border-low-contrast);
            border-block-end: var(--tds-table-deux-table-border-width) solid var(--tds-theme-border-low-contrast);
  }

  .tds-table-deux[class*=-stacked-list].tds-table-deux--grouped-row .tds-table-deux-row:first-child th:not(.tds-th--caption) {
    --tds-table-deux-table-cell-border-block-start: none;
  }

  .tds-table-deux[class*=-stacked-list] .tds-table-deux-row td:before,.tds-table-deux[class*=-stacked-list] .tds-table-deux-row th:before {
    content: var(--columnHeader);
  }
}

/*
 * Data Table
 * - Distinct from consumer display/feature tables
 * - Fewer variants, intended for data-dense/enterprise work
 *
 * In-Progress Component
 * - Expect the component structure to change as this pattern becomes more refined over the course of TDS v5
**/

/* stylelint-disable */

/* stylelint doesn't understand :where/:is selector yet & thinks it has higher specificity */

table {
  color: inherit;
}

/* Wrapper + Toolbar */

.tds-data-table-wrapper {
  --tds-data-table--row-hover-radius: 4px;
  --tds-data-table--row-outdent-size: 8px;
  --tds-data-table--vertical-align: middle;
  -webkit-margin-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*-1);
  -webkit-margin-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*-1);

  inline-size: calc(100% + (var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*2);
          margin-inline-end: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*-1);
          margin-inline-start: calc((var(--tds-data-table--row-outdent-size) + var(--tds-data-table--row-hover-radius))*-1);
  overflow-x: auto;
  overflow-y: visible;
}

/* Create a minimum space at the top when it's following something else */

*+:is(.tds-data-table-wrapper,.tds-data-table-toolbar) {
  -webkit-margin-before: var(--tds-size--3x);
          margin-block-start: var(--tds-size--3x);
}

.tds-data-table-wrapper+.tds-pagination {
  -webkit-margin-before: var(--tds-size--3x);
          margin-block-start: var(--tds-size--3x);
}

.tds-data-table-toolbar {
  justify-content: space-between;
}

.tds-data-table-toolbar,.tds-data-table-tools {
  align-items: center;
  display: flex;
  gap: var(--tds-size--2x);
}

.tds-density--dense .tds-data-table-tools {
  gap: var(--tds-size--1x);
}

/* Core Table */

.tds-data-table {
  border-spacing: 0;
  font-size: var(--tds-data-table--font-size);
  font-variant-numeric: tabular-nums;
  inline-size: calc(100% - var(--tds-data-table--row-hover-radius)*2);
  margin: 0 var(--tds-data-table--row-hover-radius);
  position: relative;
  z-index: 1;
}

.tds-data-table--align-top {
  --tds-data-table--vertical-align: top;
}

.tds-data-table--align-bottom {
  --tds-data-table--vertical-align: bottom;
}

.tds-data-table tr {
  background-color: transparent;
  transition: background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}

/* Specific Cell Styles */

.tds-data-table :where(th,td) {
  -webkit-border-after: 1px solid var(--tds-theme-background-container);
  block-size: var(--tds-size--5x);
          border-block-end: 1px solid var(--tds-theme-background-container);
  position: relative;
  text-align: start;
  transition: background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
  vertical-align: var(--tds-data-table--vertical-align);
  white-space: nowrap;
}

/* Potential Gotcha: ".tds-data-table :where(tbody th, td)" potentially reaches outside itself,
 * as in the case of nested tables. It would only select the th's inside the data-table,
 * but it would select all the th's inside that are also inside any tbody in the ancestor tree
 * therefore we need to scope the tbody to be withhin the data-table.
 *
 * tbody :where(th, td) unnecessarily scopes td's, but is a much safer selector */

.tds-data-table tbody :where(th,td):is(:first-child,:last-child):before {
  border-color: transparent;
  bottom: -1px;
  content: "";
  position: absolute;
  top: -1px;
  transition: background-color .3s ease,top .3s ease;
  z-index: -1;
}

.tds-data-table tbody :where(th,td):first-child:before,[dir=rtl] .tds-data-table tbody :where(th,td):last-child:before {
  border-radius: var(--tds-data-table--row-hover-radius) 0 0 var(--tds-data-table--row-hover-radius);
  left: calc(var(--tds-data-table--row-hover-radius)*-1);
  right: 100%;
}

.tds-data-table tbody :where(th,td):last-child:before,[dir=rtl] .tds-data-table tbody :where(th,td):first-child:before {
  border-radius: 0 var(--tds-data-table--row-hover-radius) var(--tds-data-table--row-hover-radius) 0;
  left: 100%;
  right: calc(var(--tds-data-table--row-hover-radius)*-1);
}

.tds-data-table th {
  font-weight: var(--tds-font-weight--medium);
}

.tds-data-table thead :where(th,td) {
  padding: 12px var(--tds-data-table--row-outdent-size);
}

.tds-data-table tbody :where(th,td) {
  padding: var(--tds-size--1x) var(--tds-data-table--row-outdent-size);
}

/* Hovered row */

.tds-data-table tbody tr:is(:hover,.tds--highlighted),.tds-data-table tbody tr:is(:hover,.tds--highlighted) :where(th,td):before {
  background-color: var(--tds-theme-background-container);
}

/* Selected row */

.tds-data-table tbody tr.tds-tr--selected {
  background-color: var(--tds-theme-background-container-highlight);
  position: relative;
  z-index: 4;
}

.tds-data-table tbody tr.tds-tr--selected :where(th,td) {
  border-color: var(--tds-theme-background-container-highlight);
  box-shadow: 0 -1px 0 0 var(--tds-theme-background-container-highlight);
}

.tds-data-table tbody tr.tds-tr--selected :where(th,td):before {
  background-color: var(--tds-theme-background-container-highlight);
}

.tds-data-table tbody tr.tds-tr--selected+tr.tds-tr--selected :where(th,td):before {
  top: -6px;
}

/* Focus row */

.tds--indicate-focus .tds-data-table tbody tr:focus-within {
  outline: var(--tds-outline--focus);
  outline-offset: -5px;

  z-index: 5;
}

/* Specialized Cells */

.tds-td--actions {
  -webkit-padding-end: var(--tds-data-table--row-outdent-size);
  -webkit-padding-start: var(--tds-data-table--row-outdent-size);
          padding-inline-end: var(--tds-data-table--row-outdent-size);
          padding-inline-start: var(--tds-data-table--row-outdent-size);
  text-align: end;
}

.tds-data-table tbody tr:is(:hover,.tds--highlighted) .tds-td--actions {
  position: sticky;
  right: 0;

  /* z-index has to be set on the cell instead of the row for Safari */
  z-index: 10;
}

.tds-td--select {
  -webkit-padding-end: var(--tds-data-table--row-outdent-size);
  -webkit-padding-start: var(--tds-data-table--row-outdent-size);
          padding-inline-end: var(--tds-data-table--row-outdent-size);
          padding-inline-start: var(--tds-data-table--row-outdent-size);
  white-space: nowrap;
  width: 0;
}

/* Sort (Individual Headers) */

.tds-th--sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.tds-data-table thead :where(th,td).tds-th--sortable {
  block-size: var(--tds-size--6x);
  padding: 0;
}

.tds-th--sortable :focus {
  outline: none;
}

.tds-th--sortable .tds-th--inner:before {
  background-color: transparent;
  border-radius: var(--tds-size--half);
  bottom: var(--tds-size--half);
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color .3s ease,transform .3s ease;
  z-index: -1;
}

.tds-th--sortable:hover .tds-th--inner:before {
  background-color: var(--tds-theme-background-container);
}

.tds-th--sortable .tds-th--inner:focus-visible:before {
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}

.tds--indicate-focus .tds-th--sortable .tds-th--inner:focus:before {
  outline: var(--tds-outline--focus);
  outline-offset: -2px;
}

.tds-data-table--prototype-animated-th-hover .tds-th--sortable .tds-th--inner:before {
  transform: scale(.7);
}

.tds-data-table--prototype-animated-th-hover .tds-th--sortable:hover .tds-th--inner:before {
  transform: scale(1);
}

/* Same padding internally as a regular th */

.tds-th--sortable .tds-th--inner {
  padding: 12px var(--tds-data-table--row-outdent-size);
  text-align: inherit;
  width: 100%;
}

.tds-th--sortable .tds-icon {
  -webkit-margin-start: var(--tds-size--half);
          margin-inline-start: var(--tds-size--half);
  vertical-align: middle;
}

:where(.tds-data-table) th [class*=tds-icon-double-chevron] {
  --tds-icon-double-chevron-down--fill: var(--tds-theme-border);
  --tds-icon-double-chevron-up--fill: var(--tds-theme-border);

  opacity: 0;
  transition: opacity .3s ease,transform .3s ease;
}

.tds-th--sort-asc [class*=tds-icon-double-chevron] {
  --tds-icon-double-chevron-up--fill: var(--tds-theme-foreground-high-contrast);
}

.tds-th--sort-desc [class*=tds-icon-double-chevron] {
  --tds-icon-double-chevron-down--fill: var(--tds-theme-foreground-high-contrast);
}

:is(.tds-th--sortable:hover,.tds-th--sort-asc,.tds-th--sort-desc) [class*=tds-icon-double-chevron] {
  opacity: 1;
}

.tds-th--sortable :focus-visible [class*=tds-icon-double-chevron] {
  opacity: 1;
}

.tds--indicate-focus .tds-th--sortable :focus [class*=tds-icon-double-chevron] {
  opacity: 1;
}

/* Sticky First Column */

.tds-data-table--sticky-first-col th:first-child {
  left: 0;
  position: sticky;
  z-index: 1;
}

[dir=rtl] .tds-data-table--sticky-first-col th:first-child {
  left: auto;
  right: 0;
}

.tds-data-table--sticky-first-col th:first-child:after {
  background: var(--tds-theme-background, var(--tds-color-white));
  bottom: 1px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 1px;
  transition: background-color .3s ease;

  /* Should stack behind the ::before element on sticky headers,
  that way a sticky + sortable header gets the right background on hover */
  z-index: -2;
}

.tds-data-table--sticky-first-col tbody tr:is(:hover,.tds--highlighted) th:first-child:after {
  background: var(--tds-theme-background-container);
}

/* Null Message */

.tds-data-table-null-message {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: clamp(100px, 10vh, 200px) 40px;
}

/* TODO: Refactor imports for tabs */

/* @import './panels--carousel.css'; */

/**
 * tab-panel base styles
 * - Import this file only if you are running your own css post-processor and know what you're doing.
 */

.tds-tab-panel-list {
  inline-size: 100%;
}

.tds-tab-panel {
  display: none;
  transition: visibility .5s .5s;
  visibility: hidden;
}

.tds-tab-panel--active {
  display: block;
  transition: visibility .5s 0s;
  visibility: inherit;
}

/* Tab Lists */

.tds-tab-list {
  --tds-tab--background-color-off: transparent;
  --tds-tab--background-color-on: var(--tds-theme-background-container);
  --tds-tab--border-radius: var(--tds-border-radius--pill);
  --tds-tab--box-shadow--focus-off: inset 0 0 0 0 transparent;
  --tds-tab--box-shadow--focus-on: inset 0 0 0 3px rgba(var(--tds-color--rgb-shade), 0.08);
  --tds-tab--box-shadow--highlight-off: 0 0 0 0 transparent;
  --tds-tab--box-shadow--highlight-on: 0 0 0 0 transparent;
  --tds-tab-list--height: var(--tds-height--pill);

  align-items: center;
  block-size: var(--tds-tab-list--height);
  display: grid;
  gap: var(--tds-size--half);
  grid-auto-flow: column;
  overflow-x: auto;
  position: relative;
}

/* Variants */

.tds-tab-list--toggle {
  --tds-tab--background-color-on: var(--tds-color-white);
  --tds-tab--border-radius: calc(var(--tds-border-radius--pill) - 2px);
  --tds-tab--box-shadow--highlight-on: var(--tds-box-shadow--small);

  background-color: var(--tds-theme-background-container-alt);
  border-radius: var(--tds-border-radius--pill);
  padding: var(--tds-size--half);
}

:is(.tds-scrim--black,.tds-colorscheme--dark) .tds-tab-list--toggle {
  --tds-tab--background-color-on: var(--tds-color-grey-20);
}

/* Rectangular variants */

.tds-tab-list--legacy-vertical,.tds-tab-list--underline,.tds-tab-list--vertical {
  --tds-tab--border-radius: 0;

  gap: 0;
}

.tds-tab-list--legacy-vertical,.tds-tab-list--vertical {
  --tds-tab--justify-content: start;
  --tds-tab-list--height: auto;

  grid-auto-flow: row;
}

.tds-tab-list--legacy-vertical {
  --tds-tab--background-color-on: transparent;
  --tds-tab--box-shadow--highlight-off: inset 0 0 0 0 transparent;
  --tds-tab--box-shadow--highlight-on: inset -4px 0 0 0 var(--tds-theme-primary);
}

.tds-tab-list--underline {
  --tds-tab--background-color-on: transparent;
  --tds-tab--box-shadow--highlight-off: inset 0 -1px 0 0 var(--tds-theme-foreground-high-contrast);
  --tds-tab--box-shadow--highlight-on: inset 0 -4px 0 0 var(--tds-theme-foreground-high-contrast);
  --tds-tab-list--height: var(--tds-size--7x);
}

/* Dots */

.tds-tab-list--dots {
  --tds-tab--background-color-off: var(--tds-theme-border);
  --tds-tab--background-color-on: var(--tds-theme-foreground-high-contrast);
  --tds-tab-list--height: 12px;

  justify-content: center;
}

/* Animation */

.tds-tab-list--animated {
  --tds-animate-backdrop-visibility: inherit;
}

/*
 * Individual Tabs
 * - Note: Several tokens come from the tab-list component
 */

.tds-tab {
  --tds-tab--background-color: var(--tds-tab--background-color-off);
  --tds-tab--box-shadow--focus: var(--tds-tab--box-shadow--focus-off);
  --tds-tab--box-shadow--highlight: var(--tds-tab--box-shadow--highlight-off);

  /* Probably generic pill styles, cross-reference with tds-btn */
  align-items: center;
  background-color: var(--tds-tab--background-color);
  block-size: calc(var(--tds-tab-list--height) - 8px);
  border-radius: var(--tds-tab--border-radius);
  box-shadow: var(--tds-tab--box-shadow--focus), var(--tds-tab--box-shadow--highlight);

  /* Tabs-specific styles */
  color: var(--tds-theme-foreground-low-contrast);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--tds-font-family--combined);
  font-size: var(--tds-font-size--20);
  font-weight: var(--tds-font-weight--medium);
  justify-content: var(--tds-tab--justify-content, center);
  line-height: 1.2;
  outline-offset: -2px;
  padding: var(--tds-size--half) var(--tds-size--3x);
  position: relative;
  scroll-snap-align: center;
  transition: background-color .3s ease,box-shadow .3s ease,color .3s ease;
}

/* Variants */

.tds-tab-list--legacy-vertical .tds-tab,.tds-tab-list--vertical .tds-tab {
  min-block-size: var(--tds-height--pill);
}

.tds-tab-list--underline .tds-tab {
  min-block-size: var(--tds-tab-list--height);
}

.tds-tab-list--dots .tds-tab {
  font-size: 0;
  outline-offset: 0;
  padding: var(--tds-size--half);
  text-indent: -10000px;
}

.tds-tab-list--animated .tds-tab {
  --tds-tab--background-color-on: var(--tds-tab--background-color-off);
  --tds-tab--box-shadow--highlight-on: var(--tds-tab--box-shadow--highlight-off);
}

.tds-tab:focus-visible {
  outline: var(--tds-outline--focus);
}

.tds--indicate-focus .tds-tab:focus {
  outline: var(--tds-outline--focus);
}

/* Active State */

.tds-tab[aria-selected=true] {
  --tds-tab--background-color: var(--tds-tab--background-color-on);
  --tds-tab--box-shadow--highlight: var(--tds-tab--box-shadow--highlight-on);
  background-color: var(--tds-tab--background-color);
  color: var(--tds-theme-foreground-high-contrast);

  cursor: inherit;
}

/* Backdrop should replicate the specific styles that indicate a selected tab */

.tds-tab-list--animated .tds--animated-backdrop {
  background-color: var(--tds-tab--background-color-on);
  border-radius: var(--tds-tab--border-radius);
  box-shadow: var(--tds-tab--box-shadow--highlight-on);
}

.tds--indicate-focus .tds--animated-backdrop {
  transition: none;
}

.tds-tab-list--dots .tds--animated-backdrop {
  z-index: 1;
}

/* @import './tab-list.css'; */

/* @import './tabs--vertical.css';
@import './tabs--underline.css';
@import './tabs--toggle.css';
@import './tabs--legacy--vertical.css';
@import './tabs--legacy--pill.css';
@import './tabs--dot.css'; */

/**
 * Tooltip Styles
 */

.tds-tooltip {
  --tds-tooltip--padding: var(--tds-padding--card);

  /* Distance the tooltip travels vertically on open/close */
  --tds-tooltip--translate-y: var(--tds-size--1x);

  /* Extra space around the tooltip that a user can hover without closing */
  --tds-tooltip--safe-space: var(--tds-size--1x);

  /*
   * Offset to allow for js to dynamically modify position, without interfering with other styles
   * - NOTE: for calc in translate rules to work, value must be '0px', not '0'
   */
  --tds-tooltip--x-offset: 0px; /* stylelint-disable-line */

  /* To normalize references for offset calculations */
  --tds-tooltip--offset-align: 8;
  --tds-tooltip--offset-padding: 24;

  background-color: var(--tds-theme-background-dialog);
  border-radius: var(--tds-border-radius--card);
  bottom: calc(100% + var(--tds-tooltip--safe-space));
  box-shadow: var(--tds-box-shadow--medium);
  inline-size: -moz-max-content;
  inline-size: max-content;
  left: 50%;
  max-inline-size: min(calc(100vw - 48px), 400px);
  padding: var(--tds-tooltip--padding);
  position: absolute;
  text-align: initial;
  top: auto;
  writing-mode: horizontal-tb;
  z-index: 550;
}

/* This sets the position to fixed and triggers JS to use different positioning functions */

.tds-tooltip.tds-tooltip--overlay {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  bottom: unset;
  position: fixed;
  transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
}

/* This is a fall-back for the JS calc that happens in setTooltipOverlayX */

.tds-tooltip.tds-tooltip--overlay.tds-tooltip--width-full {
  max-inline-size: min(calc(100vw - 48px), 400px);
}

/* Inactive state (default) */

.tds-tooltip,.tds-tooltip--closed {
  opacity: 0;
  pointer-events: none;
  transform:
    translateY(var(--tds-tooltip--translate-y))
    translateX(calc(-50% + var(--tds-tooltip--x-offset)));
  transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s .5s;
  visibility: hidden;
}

/* Active state */

.tds-tooltip.tds-tooltip--open {
  --tds-tooltip--translate-y: 0;

  opacity: 1;
  pointer-events: inherit;
  transition: opacity .5s var(--tds-bezier), transform .5s var(--tds-bezier), visibility 0s 0s;
  visibility: inherit;
}

/* Variants */

.tds-density--dense .tds-tooltip,.tds-density--dense.tds-tooltip {
  /* Offset the vertical padding to visually square the space up
  (line height makes it look too tall out of the box) */
  --tds-tooltip--padding: calc(var(--tds-padding--card--dense) - var(--tds-size--half)) var(--tds-padding--card--dense);
}

/* Orient downward */

.tds-tooltip--orientation-down {
  --tds-tooltip--translate-y: calc(var(--tds-size--1x)*-1);

  bottom: auto;
  top: calc(100% + var(--tds-tooltip--safe-space));
}

.tds-tooltip--align-end:not(.tds-tooltip--overlay),.tds-tooltip--align-start:not(.tds-tooltip--overlay) {
  transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
}

.tds-tooltip--align-start:not(.tds-tooltip--overlay),[dir=rtl] .tds-tooltip--align-end:not(.tds-tooltip--overlay) {
  left: calc(var(--tds-tooltip--padding)*-1);
  right: auto;
}

/* stylelint-disable-next-line no-descending-specificity */

.tds-tooltip--align-end:not(.tds-tooltip--overlay),[dir=rtl] .tds-tooltip--align-start:not(.tds-tooltip--overlay) {
  left: auto;
  right: calc(var(--tds-tooltip--padding)*-1);
}

/* Full-width */

.tds-tooltip--width-full {
  inline-size: auto;
  left: 0;
  max-inline-size: 100%;
  right: 0;
  transform: translateY(var(--tds-tooltip--translate-y)) translateX(0);
  writing-mode: horizontal-tb;
}

/* Enlarged hover/tap target: This prevents stray mouseout events on the trigger */

.tds-tooltip:before {
  bottom: calc(var(--tds-tooltip--safe-space)*-1);
  content: "";
  left: calc(var(--tds-tooltip--safe-space)*-1);
  position: absolute;
  right: calc(var(--tds-tooltip--safe-space)*-1);
  top: calc(var(--tds-tooltip--safe-space)*-1);
}

/**
 * Data-trigger
 * - Only determines which element triggers the visible state for the tooltip
 */

[data-tds-tooltip-trigger] {
  cursor: pointer;
}

/* Wrapper
 * - Only determines what other component sets the position for the tooltip
 */

.tds-tooltip-wrapper,.tds-tooltip-wrapper--inline {
  position: relative;
}

.tds-tooltip-wrapper {
  display: flex;
}

.tds-tooltip-wrapper--inline {
  display: inline-flex;
}

/* Content */

/* This sets the inner contents of the tooltip on a z-index above the enlarged tap target psudo-element */

.tds-tooltip>* {
  position: relative;
  z-index: 2;
}

.tds-tooltip>:first-child {
  -webkit-margin-before: 0;
  -webkit-padding-before: 0;
          margin-block-start: 0;
          padding-block-start: 0;
}

.tds-tooltip>:last-child {
  -webkit-margin-after: 0;
  -webkit-padding-after: 0;
          margin-block-end: 0;
          padding-block-end: 0;
}

.tds-component-preview,:root {
  --tds-heading--font-weight: 500;
  --tds-heading--letter-spacing: 0;
  --tds-heading--text-transform: none;
}

/******************************************************************************
Core Text Styles
******************************************************************************/

/* Should match h1-6 and text-element reset in base/normalize.css */

.tds-text--body,.tds-text--body_large,.tds-text--caption-header,.tds-text--h1,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6,.tds-text--section_subtitle {
  display: block;
  margin: 0;
}

.tds-list,.tds-text--body,.tds-text--caption-header,.tds-text--h1,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6 {
  line-height: var(--tds-line-height--30);
}

strong {
  color: var(--tds-theme-foreground-high-contrast);
}

/* -- Headlines
----------------------------------------------------------------------------- */

/* Headlines and Subtitles */

.tds-text--caption-header,.tds-text--h1,.tds-text--h1-alt,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6,h1,h2,h3,h4,h5,h6 {
  -webkit-padding-before: var(--tds-size--4x);
  -webkit-padding-after: var(--tds-size--1x);
  color: var(--tds-theme-foreground-high-contrast);
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-heading--font-weight);
  letter-spacing: var(--tds-heading--letter-spacing);
          padding-block-end: var(--tds-size--1x);
          padding-block-start: var(--tds-size--4x);
  text-transform: var(--tds-heading--text-transform);
  transition: font .33s ease,color .33s ease,opacity .33s ease,padding .33s ease;
}

.tds-text--h6,h6 {
  -webkit-padding-after: 0;
          padding-block-end: 0;
}

/* Reduce padding for directly-paired headings */

:is(h1,h2,h3,h4,h5,h6,.tds-text--h1,.tds-text--h1-alt,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6)+:is(h1,h2,h3,h4,h5,h6,.tds-text--h1,.tds-text--h1-alt,.tds-text--h2,.tds-text--h3,.tds-text--h4,.tds-text--h5,.tds-text--h6) {
  -webkit-padding-before: var(--tds-size--2x);
          padding-block-start: var(--tds-size--2x);
}

@media (max-width:599px) {
  .tds-text--h1,.tds-text--h1-alt,h1 {
    --tds-heading--letter-spacing: -0.7px;

    font-size: var(--tds-font-size--70, 28px);
    line-height: var(--tds-line-height--70, 36px);
  }

  .tds-text--h2,h2 {
    --tds-heading--letter-spacing: -0.6px;

    font-size: var(--tds-font-size--60, 24px);
    line-height: var(--tds-line-height--60, 28px);
  }

  .tds-text--h3,h3 {
    --tds-heading--letter-spacing: -0.5px;

    font-size: var(--tds-font-size--50, 20px);
    line-height: var(--tds-font-size--60, 28px);
  }

  .tds-text--h4,h4 {
    font-size: var(--tds-font-size--40, 17px);
    line-height: var(--tds-line-height--20, 20px);
  }

  .tds-text--h5,.tds-text--h6,h5,h6 {
    font-size: var(--tds-font-size--30, 14px);
    line-height: var(--tds-line-height--30, 20px);
  }

  .tds-text--caption-header {
    font-size: var(--tds-font-size--20, 12px);
    line-height: var(--tds-line-height--10, 18px);
  }
}

@media (min-width:600px) {
  .tds-text--h1,h1 {

    font-size: var(--tds-font-size--80, 40px);
    line-height: var(--tds-line-height--80, 48px);
  }

  .tds-text--h1,.tds-text--h1-alt,h1 {
    --tds-heading--letter-spacing: -0.6px;
  }

  .tds-text--h1-alt {

    font-size: var(--tds-font-size--75);
    line-height: var(--tds-line-height--75);
  }

  .tds-text--h2,h2 {
    --tds-heading--letter-spacing: -0.5px;

    font-size: var(--tds-font-size--70, 28px);
    line-height: var(--tds-line-height--70, 36px);
  }

  .tds-text--h3,h3 {
    --tds-heading--letter-spacing: -0.6px;

    font-size: var(--tds-font-size--60, 24px);
  }

  .tds-text--h3,.tds-text--h4,h3,h4 {
    line-height: var(--tds-line-height--60, 28px);
  }

  .tds-text--h4,h4 {
    --tds-heading--letter-spacing: -0.4px;

    font-size: var(--tds-font-size--50, 20px);
  }

  .tds-text--h5,h5 {
    font-size: var(--tds-font-size--40, 17px);
    line-height: var(--tds-line-height--20, 20px);
  }

  .tds-text--h6,h6 {
    font-size: var(--tds-font-size--30, 14px);
    line-height: var(--tds-line-height--30, 20px);
  }

  .tds-text--caption-header {
    font-size: var(--tds-font-size--20, 12px);
    line-height: var(--tds-line-height--10, 18px);
  }
}

/* -- Eyebrow Pattern
----------------------------------------------------------------------------- */

.tds-text-eyebrow--10,.tds-text-eyebrow--20,.tds-text-eyebrow--30 {
  display: block;
  font-family: var(--tds-font-family--combined);
  font-weight: var(--tds-font-weight--book);
  line-height: var(--tds-line-height--unitless);
}

.tds-text-eyebrow--20,.tds-text-eyebrow--30 {
  letter-spacing: -.4px;
}

.tds-text-eyebrow--10 {
  font-size: var(--tds-font-size--30);
}

.tds-text-eyebrow--20 {
  font-size: var(--tds-font-size--40);
}

.tds-text-eyebrow--30 {
  font-size: var(--tds-font-size--55);
}

@media (max-width:599px) {
  .tds-text--jumbo_mobile {
    font-family: var(--tds-font-family--combined) !important;
    font-size: 36px !important;
    font-weight: var(--tds-heading--font-weight) !important;
    line-height: 36px !important;
  }
}

/* -- Body Copy
 * NOTE: Should mirror the base copy in base/normalize.css
----------------------------------------------------------------------------- */

.tds-text--body {
  font-size: var(--tds-font-size--30);
  line-height: var(--tds-line-height--30);
}

.tds-text--body+.tds-text--body {
  -webkit-padding-before: 14px;
          padding-block-start: 14px;
}

/* Note matches tds-form-caption */

.tds-text--caption {
  -webkit-padding-before: 12px;
  color: var(--tds-theme-foreground-low-contrast);
  font-size: var(--tds-font-size--20);
  line-height: var(--tds-line-height--10);
          padding-block-start: 12px; /* TODO: this is not base8, but is base4... consistently inconsistent. */
}

/******************************************************************************
Text Modifiers
******************************************************************************/

/* -- Weight Modifiers
----------------------------------------------------------------------------- */

.tds-text--200 {
  font-weight: 200 !important;
}

.tds-text--300 {
  font-weight: 300 !important;
}

.tds-text--400 {
  font-weight: 400 !important;
}

.tds-text--500 {
  font-weight: 500 !important;
}

.tds-text--700 {
  font-weight: 700 !important;
}

/* -- Color Modifiers
---------------------------------------------------------------- */

.tds-text--contrast-high {
  color: var(--tds-theme-foreground-high-contrast);
}

.tds-text--contrast-medium {
  color: var(--tds-theme-foreground);
}

.tds-text--contrast-low {
  color: var(--tds-theme-foreground-low-contrast);
}

/* --- Alignment Modifiers
---------------------------------------------------------------- */

.tds-text--center {
  -webkit-margin-end: auto;
  -webkit-margin-start: auto;
          margin-inline-end: auto;
          margin-inline-start: auto;
  text-align: center !important;
}

.tds-text--end {
  text-align: end !important;
}

.tds-text--start {
  text-align: start !important;
}

/* -- Modifier to add visual divider line to the right of text
---------------------------------------------------------------- */

.tds-text--with_divider {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.tds-text--with_divider:after {
  -webkit-margin-start: .5em;
  background-color: var(--tds-theme-foreground-high-contrast);
  block-size: 1px;
  content: "";
  display: block;
  inline-size: 100%;
          margin-inline-start: .5em;
}

.tds-text--capitalize {
  text-transform: capitalize;
}

.tds-text--uppercase {
  text-transform: uppercase;
}

.tds-text--lowercase {
  text-transform: lowercase;
}

/* -- Code Snippet Styling
---------------------------------------------------------------- */

code {
  background-color: var(--tds-theme-background-container);
  border: 1px solid var(--tds-theme-border-low-contrast);
  border-radius: .25em;
  color: var(--tds-theme-foreground);
  font-family: var(--tds-font-family--monospace);
  max-inline-size: 100%;
  padding: .125em .414em;
  transition: background-color .3s ease,color .3s ease;
}

pre code {
  display: block;
  margin: 0;
  overflow-x: auto;
  padding: var(--tds-size--1x);
  white-space: pre;
}

/** ======================================================================
 *
 * Vertical Rhythm
 *
 * Setting up a pattern that is repeatable for all header elements.
 * This will leverage base size tokens that are then translated to
 * semantic size tokens that are used by each permutation listed below.
 *
 * The basic structure is this:
 *   1. 6 headers (h1-h6)
 *   2. 5 possible "sizes" of spacers: xl, lg, d(efault), sm, xs
 *   3. With a few exceptions, each size steps up 1 spacer point
 *      for each breakpoint listed below:
 *       a. Mobile:  0-599px
 *       b. Tablet:  600-899px
 *       c. Desktop: 900px+
 *
 *
 * Vertical Rhythm is complicated.
 *
 ====================================================================== */

.tds-component-preview,:root {
  /* -- 4px Base Spacer. Everything is calculated from here
  --------------------------------------------------------------------- */
  --tds-spacer-base: var(--tds-size--half);
  --tds-spacer-1x: var(--tds-spacer-base);
  --tds-spacer-2x: calc(var(--tds-spacer-base)*2);
  --tds-spacer-3x: calc(var(--tds-spacer-base)*3);
  --tds-spacer-4x: calc(var(--tds-spacer-base)*4);
  --tds-spacer-5x: calc(var(--tds-spacer-base)*5); /* Minimum spacer step allowed for headers */
  --tds-spacer-6x: calc(var(--tds-spacer-base)*6);
  --tds-spacer-8x: calc(var(--tds-spacer-base)*8);
  --tds-spacer-10x: calc(var(--tds-spacer-base)*10);
  --tds-spacer-12x: calc(var(--tds-spacer-base)*12);
  --tds-spacer-14x: calc(var(--tds-spacer-base)*14);
  --tds-spacer-16x: calc(var(--tds-spacer-base)*16);
  --tds-spacer-18x: calc(var(--tds-spacer-base)*18);
  --tds-spacer-20x: calc(var(--tds-spacer-base)*20);
  --tds-spacer-24x: calc(var(--tds-spacer-base)*24);
  --tds-spacer-32x: calc(var(--tds-spacer-base)*32);
}

/* stylelint-disable no-descending-specificity */

/**
 * Basic/Default Pairings
 * Listed below are the opinionated defaults for specific DOM elements
 * that have been called out as pairings that are common enough to
 * standardize against.
 ---------------------------------------------------------- */

:is(h1,h2,h3,h4)+:is(p,ul,ol,.tds-list,legend) {
  --tds-spacer-top: var(--tds-spacer-5x)
;
}

/* Typographic default */

:is(h5,p,ul,ol,.tds-list,legend)+:is(p,ul,ol,.tds-list,legend) {
  --tds-spacer-top: var(--tds-spacer-4x);
}

h6+:is(p,ul,ol,.tds-list,legend) {
  --tds-spacer-top: var(--tds-spacer-3x);
}

*+form {
  --tds-spacer-top: var(--tds-spacer-10x);
}

/**
 * This snippet sets up all headers (h1-h6) and the `tds--pad-top-*`
 * classes with the proper token so we can have...
 *
 * :drumroll:
 *
 * Semantic Sizes. :chefs_kiss:
 *
 * Note: Opt-in for now, .tds--vertical-rhythm will be removed in a future release
 * and this will become the default spacing pattern.
 *
 ---------------------------------------------------------- */

.tds--vertical-rhythm :is(h1,h2,h3,h4,h5,h6),.tds--vertical-rhythm [class*=tds--pad-top-],.tds--vertical-rhythm [class*=tds-spacer-] {
  -webkit-padding-before: var(--tds-spacer-top);
          padding-block-start: var(--tds-spacer-top);
}

/* Apply spacing to pairings only when opted-in-to */

.tds--vertical-rhythm :is(*)+:is(p,form,ul,ol,.tds-list,legend) {
  -webkit-padding-before: var(--tds-spacer-top);
          padding-block-start: var(--tds-spacer-top);
}

/* stylelint-enable no-descending-specificity */

/**
 * Mobile spacer specs chart for each size/header combo.
 *   - h1/h1-alt + xl  steps down to 72
 *   - h1/h1-alt + lg  steps down to 64
 *   - h6 lg steps down to 20
 * ============================================================
 * H1
 * H1 Alt  |
 * --------|
 * XL 72px |
 * LG 64px | H2
 * D  56px | --------| H3
 * SM 48px | XL 48px | --------| H4
 * XS 40px | LG 40px | XL 40px | --------| H5
 *         | D  32px | LG 32px | XL 32px | --------| H6
 *         | SM 24px | D  24px | LG 24px | XL 24px | --------|
 *         | XS 32px | SM 32px | D  32px | LG 32px | XL 32px |
 *                   | XS 20px | SM 20px | D  20px | LG 20px |
 *                             | XS 20px | SM 20px | D  20px |
 *                                       | XS 20px | SM 20px |
 *                                                 | XS 20px |
 * -----------------------------------------------------------
 */

@media (max-width:599px) {
  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-xl {
    --tds-spacer-top: calc(var(--tds-spacer-base)*18);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-lg {
    --tds-spacer-top: calc(var(--tds-spacer-base)*16);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt) {
    --tds-spacer-top: var(--tds-spacer-14x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-sm,:is(h2,.tds-text--h2).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-12x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-xs,:is(h2,.tds-text--h2).tds--pad-top-lg,:is(h3,.tds-text--h3).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-10x);
  }

  :is(h2,.tds-text--h2),:is(h3,.tds-text--h3).tds--pad-top-lg,:is(h4,.tds-text--h4).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-8x);
  }

  :is(h2,.tds-text--h2).tds--pad-top-sm,:is(h3,.tds-text--h3),:is(h4,.tds-text--h4).tds--pad-top-lg,:is(h5,.tds-text--h5).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-6x);
  }

  :is(h2,.tds-text--h2).tds--pad-top-xs,:is(h3,.tds-text--h3).tds--pad-top-sm,:is(h3,.tds-text--h3).tds--pad-top-xs,:is(h4,.tds-text--h4),:is(h4,.tds-text--h4).tds--pad-top-sm,:is(h4,.tds-text--h4).tds--pad-top-xs,:is(h5,.tds-text--h5),:is(h5,.tds-text--h5).tds--pad-top-lg,:is(h5,h6,.tds-text--h5,.tds-text--h6):is(.tds--pad-top-sm,.tds--pad-top-xs),:is(h6,.tds-text--h6),:is(h6,.tds-text--h6).tds--pad-top-lg,:is(h6,.tds-text--h6).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-5x);
  }
}

/**
 * Tablet breakpoint: 600-899px.
 *   - "Steps up" 1 spacer stop from mobile
 *   - "Steps down" 1 spacers stop from desktop
 *   - h1/h1-alt + xl  steps down to 80
 *   - h1/h1-alt + lg  steps down to 72
 *   - h6 lg steps down to 20
 * ============================================================
 * H1
 * H1 Alt  |
 * --------|
 * XL 80px |
 * LG 72px | H2
 * D  64px | --------| H3
 * SM 56px | XL 56px | --------| H4
 * XS 48px | LG 48px | XL 48px | --------| H5
 *         | D  40px | LG 40px | XL 40px | --------| H6
 *         | SM 32px | D  32px | LG 32px | XL 32px | --------|
 *         | XS 24px | SM 24px | D  24px | LG 24px | XL 24px |
 *                   | XS 20px | SM 20px | D  20px | LG 20px |
 *                             | XS 20px | SM 20px | D  20px |
 *                                       | XS 20px | SM 20px |
 *                                                 | XS 20px |
 * -----------------------------------------------------------
 */

@media (min-width:600px) and (max-width:899px) {
  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-20x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-lg {
    --tds-spacer-top: var(--tds-spacer-18x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt) {
    --tds-spacer-top: var(--tds-spacer-16x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-sm,:is(h2,.tds-text--h2).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-14x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-xs,:is(h2,.tds-text--h2).tds--pad-top-lg,:is(h3,.tds-text--h3).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-12x);
  }

  :is(h2,.tds-text--h2),:is(h3,.tds-text--h3).tds--pad-top-lg,:is(h4,.tds-text--h4).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-10x);
  }

  :is(h2,.tds-text--h2).tds--pad-top-sm,:is(h3,.tds-text--h3),:is(h4,.tds-text--h4).tds--pad-top-lg,:is(h5,.tds-text--h5).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-8x);
  }

  :is(h2,.tds-text--h2).tds--pad-top-xs,:is(h3,.tds-text--h3).tds--pad-top-sm,:is(h4,.tds-text--h4),:is(h5,.tds-text--h5).tds--pad-top-lg,:is(h6,.tds-text--h6).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-6x);
  }

  :is(h3,.tds-text--h3).tds--pad-top-xs,:is(h4,.tds-text--h4).tds--pad-top-sm,:is(h4,.tds-text--h4).tds--pad-top-xs,:is(h5,.tds-text--h5),:is(h5,h6,.tds-text--h5,.tds-text--h6):is(.tds--pad-top-sm,.tds--pad-top-xs),:is(h6,.tds-text--h6),:is(h6,.tds-text--h6).tds--pad-top-lg {
    --tds-spacer-top: var(--tds-spacer-5x);
  }
}

/**
 * Desktop breakpoint: 900px+
 *   - "Steps up" 2 spacer stops from mobile
 *   - "Steps up" 1 spacer stop from tablet
 * ============================================================
 * H1
 * H1 Alt  |
 * --------|
 * XL 88px |
 * LG 80px | H2
 * D  72px | --------| H3
 * SM 64px | XL 64px | --------| H4
 * XS 56px | LG 56px | XL 56px | --------| H5
 *         | D  48px | LG 48px | XL 48px | --------| H6
 *         | SM 40px | D  40px | LG 40px | XL 40px | --------|
 *         | XS 32px | SM 32px | D  32px | LG 32px | XL 32px |
 *                   | XS 24px | SM 24px | D  24px | LG 28px |
 *                             | XS 20px | SM 20px | D  24px |
 *                                       | XS 20px | SM 20px |
 *                                                 | XS 20px |
 * -----------------------------------------------------------
 */

@media (min-width:900px) {
  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-xl {
    --tds-spacer-top: calc(var(--tds-spacer-base)*22);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-lg {
    --tds-spacer-top: calc(var(--tds-spacer-base)*20);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt) {
    --tds-spacer-top: var(--tds-spacer-18x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-sm,:is(h2,.tds-text--h2).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-16x);
  }

  :is(h1,.tds-text--h1,.tds-text--h1-alt).tds--pad-top-xs,:is(h2,.tds-text--h2).tds--pad-top-lg,:is(h3,.tds-text--h3).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-14x);
  }

  :is(h2,.tds-text--h2),:is(h3,.tds-text--h3).tds--pad-top-lg,:is(h4,.tds-text--h4).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-12x);
  }

  :is(h2,.tds-text--h2).tds--pad-top-sm,:is(h3,.tds-text--h3),:is(h4,.tds-text--h4).tds--pad-top-lg,:is(h5,.tds-text--h5).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-10x);
  }

  :is(h2,.tds-text--h2).tds--pad-top-xs,:is(h3,.tds-text--h3).tds--pad-top-sm,:is(h4,.tds-text--h4),:is(h5,.tds-text--h5).tds--pad-top-lg,:is(h6,.tds-text--h6).tds--pad-top-xl {
    --tds-spacer-top: var(--tds-spacer-8x);
  }

  :is(h3,.tds-text--h3).tds--pad-top-xs,:is(h4,.tds-text--h4).tds--pad-top-sm,:is(h5,.tds-text--h5),:is(h6,.tds-text--h6) {
    --tds-spacer-top: var(--tds-spacer-6x);
  }

  :is(h4,.tds-text--h4).tds--pad-top-xs,:is(h5,h6,.tds-text--h5,.tds-text--h6):is(.tds--pad-top-sm,.tds--pad-top-xs) {
    --tds-spacer-top: var(--tds-spacer-4x);
  }

  :is(h6,.tds-text--h6).tds--pad-top-lg {
    --tds-spacer-top: calc(var(--tds-spacer-base)*7);
  }
}

/**
 *
 * TODO: Component push classes.
 *
 * These classes are based on the same "push" custom properties listed above,
 * but are meant more specifically for components, or groups of components.
 *
 * A sample markup structure would look something like this:
 * <div class="component-push-xl">
 *   <h3>Some Header</h3>
 *   <p>Lorem ipsum dolor sit amet.</p>
 *   <div class="tds-card">...</div>
 * </div>
 *
 * The snippet above would push all the content down (or away from)
 * the content above it by the 'xl' amount.
 *
 * | Size | Px | Token   | Semantic Size     |
 * |----|------|---------|-------------------|
 * | XL | 56px | size-7x | component-push-xl |
 * | LG | 48px | size-6x | component-push-lg |
 * | D  | 40px | size-5x | component-push    |
 * | SM | 32px | size-4x | component-push-sm |
 * | XS | 24px | size-3x | component-push-xs |
 *
 ---------------------------------------------------------- */

/* Opt-in Modifier classes
 ---------------------------------------------------------- */

.tds--pad-top-1x { --tds-spacer-top: var(--tds-spacer-1x); }

.tds--pad-top-2x { --tds-spacer-top: var(--tds-spacer-2x); }

.tds--pad-top-3x { --tds-spacer-top: var(--tds-spacer-3x); }

.tds--pad-top-4x { --tds-spacer-top: var(--tds-spacer-4x); }

.tds--pad-top-6x { --tds-spacer-top: var(--tds-spacer-6x); }

.tds--pad-top-8x { --tds-spacer-top: var(--tds-spacer-8x); }

.tds--pad-top-10x { --tds-spacer-top: var(--tds-spacer-10x); }

.tds--pad-top-12x { --tds-spacer-top: var(--tds-spacer-12x); }

.tds--pad-top-14x { --tds-spacer-top: var(--tds-spacer-14x); }

.tds--pad-top-16x { --tds-spacer-top: var(--tds-spacer-16x); }

.tds--pad-top-18x { --tds-spacer-top: var(--tds-spacer-18x); }

.tds--pad-top-24x { --tds-spacer-top: var(--tds-spacer-24x); }

.tds--pad-top-32x { --tds-spacer-top: var(--tds-spacer-32x); }

/* TODO: Q2 2021 v5.0 Forms Refactor */

.tds-progress_bar-wrapper {
  inline-size: 100%;
  position: relative;
}

.tds-progress_bar {
  --tds-progress-bar--background-color: transparent;
  --tds-progress-bar--bar-color: var(--tds-theme-background-container);
  --tds-progress-bar--border-radius: var(--tds-size--4x);
  --tds-progress-bar--height: var(--tds-size--2x);
  --tds-progress-bar--value-color: var(--tds-theme-primary);

  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  block-size: var(--tds-progress-bar--height);
  border: none;
  border-radius: var(--tds-progress-bar--border-radius);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
  display: block;
  inline-size: 100%;
  overflow: hidden;
}

.tds-density--dense {
  --tds-progress-bar--height: 12px;
}

.tds-progress_bar--secondary {
  --tds-progress-bar--value-color: var(--tds-theme-foreground-high-contrast);
}

.tds-progress_bar::-webkit-progress-bar {
  background-color: var(--tds-progress-bar--bar-color);
  border: none;
  border-radius: var(--tds-progress-bar--border-radius);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.tds-progress_bar::-webkit-progress-value {
  background-color: var(--tds-progress-bar--value-color);
  border-radius: var(--tds-progress-bar--border-radius);
  -webkit-transition: width .5s;
  transition: width .5s;
}

.tds-progress_bar::-moz-progress-bar {
  background-color: var(--tds-progress-bar--value-color);
}

/* -- Button Theme Adjustments
----------------------------------------------------------------------------- */

/* stylelint-disable no-descending-specificity */

.tds-theme--replicant {
  --tds-btn--font-size: var(--tds-font-size--20);
}

/* Default Button */

.tds-theme--replicant .tds-btn {
  --tds-btn--background-color: transparent;

  border: none;
  color: var(--tds-theme-foreground-on-primary);
  filter: var(--tds-glow--medium);
  font-weight: var(--tds-font-weight--bold, 700);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: .5s ease;
}

.tds-theme--replicant .tds-btn:focus-visible {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

.tds-scrim--black .tds-theme--replicant .tds-card .tds-btn,.tds-theme--replicant .tds-scrim--black .tds-card .tds-btn,.tds-theme--replicant.tds-scrim--black .tds-card .tds-btn {
  color: var(--tds-color-black);
}

.tds-scrim--black .tds-theme--replicant .tds-card .tds-btn--tertiary,.tds-theme--replicant .tds-scrim--black .tds-card .tds-btn--tertiary,.tds-theme--replicant.tds-scrim--black .tds-card .tds-btn--tertiary {
  color: var(--tds-color-white);
}

.tds-theme--replicant :is(.tds-btn--secondary,.tds-btn--tertiary) {
  color: var(--tds-theme-foreground-high-contrast);
}

.tds-theme--replicant .tds-btn:is(:disabled,.tds--disabled) {
  filter: none;
}

.tds-theme--replicant .tds-btn:is(:focus,.tds--focus) {
  box-shadow: none;
  outline: none;
}

/* While duplicating the line above, they cannot be combined */

.tds--focus .tds-theme--replicant .tds-btn:focus,.tds--focus.tds-theme--replicant .tds-btn:focus,.tds--indicate-focus .tds-theme--replicant .tds-btn:focus,.tds-theme--replicant .tds--focus .tds-btn:focus {
  outline: var(--tds-outline--focus);
  outline-offset: 2px;
}

/* Override default hover/focus background change */

.tds-theme--replicant .tds-btn--secondary:not([disabled],.tds--disabled):is(:focus,.tds--focus) {
  --tds-btn--background-color: transparent;

  color: var(--tds-theme-foreground-high-contrast);
}

.tds-theme--replicant .tds-btn:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
  --tds-btn--background-color: transparent;

  animation: tds-flicker--soft 1s forwards;
  filter: var(--tds-glow--bright);
  opacity: 1;
  transition: .52s ease .48s;
}

.tds-theme--replicant .tds-btn--secondary:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
  color: var(--tds-theme-foreground-on-primary);
}

.tds-theme--replicant .tds-btn:after,.tds-theme--replicant .tds-btn:before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .5s ease;
}

.tds-theme--replicant .tds-btn:before {
  background: var(--tds-theme-foreground-high-contrast);
  -webkit-clip-path: var(--tds-notch);
          clip-path: var(--tds-notch);
  z-index: -1;
}

/**
 There are (at least?) 3 possible arrangements for theme layer and
 language direction, and we need to account for each of them:
   1. `dir` and theme class are on the same element
   2. `dir` is on a parent element from theme class
   3. `dir` is on a child element from theme class
*/

:is([dir=rtl].tds-theme--replicant,[dir=rtl] .tds-theme--replicant,.tds-theme--replicant [dir=rtl]) .tds-btn:before {
  transform: rotateY(180deg);
}

:is([dir=rtl].tds-theme--replicant,[dir=rtl] .tds-theme--replicant,.tds-theme--replicant [dir=rtl]) .tds-btn:after {
  transform: rotateY(180deg);
}

.tds-theme--replicant :is(.tds-btn--secondary,.tds-btn--tertiary):before {
  background: transparent;
}

.tds-theme--replicant .tds-btn:is(:hover,.tds--hover):not([disabled],.tds--disabled):after,.tds-theme--replicant .tds-btn:is(:hover,.tds--hover):not([disabled],.tds--disabled):before {
  transition: .52s ease .48s;
}

.tds-theme--replicant .tds-btn--secondary:after {
  background: var(--tds-theme-foreground-high-contrast);
  -webkit-clip-path: var(--tds-notch--outline);
          clip-path: var(--tds-notch--outline);
}

.tds-theme--replicant .tds-btn--secondary:is(:hover,.tds--hover):not([disabled],.tds--disabled):before {
  background: var(--tds-theme-foreground-high-contrast);
}

.tds-theme--replicant .tds-card .tds-btn--tertiary {
  background-color: inherit;
}

:where(.tds-theme--replicant) .tds-chip {
  --tds-border-radius--pill: 0;
  -webkit-padding-end: var(--tds-size--half);
  -webkit-padding-start: var(--tds-size--1x);

  background-color: var(--tds-theme-foreground-high-contrast);
  color: var(--tds-theme-foreground-on-primary);
          padding-inline-end: var(--tds-size--half);
          padding-inline-start: var(--tds-size--1x);
}

:where(.tds-theme--replicant) .tds-form-input--default .tds-chip {
  background-color: var(--tds-theme-foreground-high-contrast);
}

.tds-theme--replicant .tds-th--sortable .tds-th--inner:before {
  border-radius: 0;
}

/* Override density values */

/* Note: indentation is not supported in the Replicant theme.
 * Due to css lacking dynamic recalculation of variables, composing
 * themes, densities, and indentations together leads to absurdly long
 * stacks of selectors */

.tds-form--indent .tds-theme--replicant,.tds-theme--replicant,.tds-theme--replicant .tds-form--indent,.tds-theme--replicant [class*=tds-density--],.tds-theme--replicant.tds-form--indent,.tds-theme--replicant[class*=tds-density--],[class*=tds-density--] .tds-theme--replicant {
  --tds-form--indent: 0;
}

.tds-theme--replicant .tds-form-label {
  --tds-form-label--font-size: var(--tds-font-size--20);

  color: var(--tds-theme-foreground-high-contrast);
  font-weight: var(--tds-heading--font-weight);
  letter-spacing: var(--tds-heading--letter-spacing);
  text-transform: var(--tds-heading--text-transform);
}

.tds-theme--replicant .tds-form-input {
  background: none;
  box-shadow: none;
  color: var(--tds-theme-foreground-high-contrast);
}

.tds-theme--replicant .tds-form-input--default:not(.tds-form-input--collapsed) {
  --tds-form--indent: 12px;
  --tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);

  border-radius: 0;
}

.tds-theme--replicant .tds-form--error .tds-form-input--default {
  --tds-form-input--border-color: var(--tds-theme-secondary-negative);
}

.tds-scrim--black .tds-theme--replicant .tds-card,.tds-theme--replicant .tds-scrim--black .tds-card,.tds-theme--replicant.tds-scrim--black .tds-card {
  --tds-color--secondary: var(--tds-color-white);
  --tds-form-input--border-color: var(--tds-color-white);
}

.tds-theme--replicant .tds-form-input--default:before {
  background-color: var(--tds-form-input--border-color, var(--tds-theme-foreground-high-contrast));
  bottom: 0;
  -webkit-clip-path: var(--tds-notch--outline-thin);
          clip-path: var(--tds-notch--outline-thin);
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: background-color .5s ease,-webkit-clip-path .5s ease;
  transition: clip-path .5s ease,background-color .5s ease;
  transition: clip-path .5s ease,background-color .5s ease,-webkit-clip-path .5s ease;
}

/* Align outline adjustments with buttons */

.tds-theme--replicant .tds-form-input--default:focus-within {
  --tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);

  outline-offset: 2px;
}

:is([dir=rtl].tds-theme--replicant,[dir=rtl] .tds-theme--replicant,.tds-theme--replicant [dir=rtl]) .tds-form-input--default:before {
  transform: rotateY(180deg);
}

.tds-theme--replicant .tds-form-input--default.tds-form-input--readonly:before {
  display: none;
}

.tds-theme--replicant .tds-form-input--default:focus-within:before {
  -webkit-clip-path: var(--tds-notch--outline);
          clip-path: var(--tds-notch--outline);
}

.tds-theme--replicant .tds-form-input--default .tds-form-input.tds-form-input--focus,.tds-theme--replicant .tds-form-input--default.tds-form-input.tds-form-input--focus {
  --tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
}

/* Optical fixes for icons positioned near the notch */

.tds-theme--replicant .tds-form-input-trailing .tds-icon--small {
  -webkit-margin-end: 2px;
          margin-inline-end: 2px;
}

.tds-theme--replicant .tds-form-input-trailing .tds-icon-btn:last-child {
  -webkit-margin-end: -6px;
          margin-inline-end: -6px;
}

.tds-theme--replicant .tds-card .tds-form-input--default:before {
  --tds-form-input--border-color: var(--tds-theme-foreground-high-contrast);
}

.tds-theme--replicant .tds-form-input-choice {
  /* Affects the base border-color */
  --tds-text--color--light: var(--tds-theme-foreground-high-contrast);

  border-radius: 0;
  transition: opacity .33s ease;
}

/* Replace default scale animation */

.tds-theme--replicant .tds-form-input-choice:after {
  opacity: 0;
  transform: none;
  transition: opacity .33s ease;
}

.tds-theme--replicant :is(.tds-form-input-choice:checked,.tds-form-input-choice:indeterminate) {
  animation: tds-flicker--soft 1s forwards;
  opacity: 1;
}

/* We have to specifically target checkbox to keep from messing-up radios */

.tds-theme--replicant .tds-form-input-choice:checked:after,.tds-theme--replicant .tds-form-input-choice[type=checkbox]:indeterminate:after {
  opacity: 1;
  transition: opacity .52s ease .48s;
}

/* Special treatment for labels */

.tds-theme--replicant .tds-form-input-choice-label .tds-form-label {
  font-weight: var(--tds-font-weight--medium);
  letter-spacing: inherit;
  text-transform: inherit;
}

.tds-theme--replicant .tds-form-input-hidden-choice+.tds-form-input {
  --tds-plus--transform-size: calc((var(--tds-height--choice) + var(--tds-size--1x))*-1);

  color: var(--tds-theme-foreground);
  font-weight: var(--tds-heading--font-weight);
  letter-spacing: var(--tds-heading--letter-spacing);
  text-transform: var(--tds-heading--text-transform);
}

.tds-theme--replicant .tds-form-input-hidden-choice+.tds-form-input:hover,.tds-theme--replicant .tds-form-input-hidden-choice:checked+.tds-form-input {
  color: var(--tds-theme-foreground-high-contrast);
}

/* Fading line */

.tds-theme--replicant .tds-form-input-hidden-choice+.tds-form-input:after {
  -webkit-margin-before: var(--tds-size--half);
  background: var(--tds-fading-line);
  block-size: 3px;
  bottom: 0;
  box-shadow: 0 0 0 0 rgba(var(--tds-color--rgb-shade), .15);
  content: "";
  display: block;
  inline-size: 100%;
          margin-block-start: var(--tds-size--half);
  opacity: .33;
  position: absolute;
  transition: opacity .33s ease,box-shadow .33s ease;
}

[dir=rtl] .tds-theme--replicant .tds-form-input-hidden-choice+.tds-form-input:after {
  transform: rotateY(180deg);
}

.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]+.tds-form-input:after {
  transition: opacity .52s ease .48s,box-shadow .52s ease .48s;
}

.tds-theme--replicant .tds-form-input-hidden-choice:checked+.tds-form-input:after {
  box-shadow: -2px 0 6px 4px rgba(var(--tds-color--rgb-shade), .15);
  opacity: 1;
}

/* Correct v7 indentation */

.tds-theme--replicant .tds-form-input--option {
  --tds-form--indent: 0;
}

/* Matches original v6 styles used for baseline. TODO: Set this to 0 as part of v7 - AWSM-6511 */

.tds-density--dense .tds-theme--replicant .tds-form-input--option,.tds-theme--replicant .tds-density--dense .tds-form-input--option,.tds-theme--replicant.tds-density--dense .tds-form-input--option {
  --tds-form--indent: var(--tds-size--2x);
}

/* Matches original v6 styles used for baseline. TODO: Set this to 0 as part of v7 - AWSM-6511 */

.tds-density--default .tds-theme--replicant .tds-form-input--option,.tds-theme--replicant .tds-density--default .tds-form-input--option,.tds-theme--replicant.tds-density--default .tds-form-input--option {
  --tds-form--indent: 20px;
}

/* Plus shape */

.tds-theme--replicant .tds-form-input-visual-checkbox {
  box-shadow: none;
  position: relative;
}

.tds-theme--replicant .tds-form-input-hidden-choice:focus+.tds-form-input {
  border-radius: 0;
}

.tds-theme--replicant .tds-form-input-hidden-choice:focus+.tds-form-input .tds-form-input-visual-checkbox {
  box-shadow: none;
}

.tds-theme--replicant .tds-form-input-visual-checkbox:after,.tds-theme--replicant .tds-form-input-visual-checkbox:before {
  animation: turn-off 1s;
  background: currentColor;
  block-size: 1em;
  bottom: 0;
  content: "";
  display: block;
  inline-size: 2px;
  left: 0;
  margin: auto;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(0deg);
  transition: transform .52s var(--tds-bezier) .48s;
}

.tds-theme--replicant .tds-form-input-visual-checkbox:after {
  transform: rotate(90deg);
}

.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]+.tds-form-input .tds-form-input-leading {
  transition: transform .52s var(--tds-bezier) .48s;
}

.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]:checked+.tds-form-input .tds-form-input-leading {
  animation: turn-on 1s;
  transform: translateX(var(--tds-plus--transform-size));
}

.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]:checked+.tds-form-input .tds-form-input-visual-checkbox:after,.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]:checked+.tds-form-input .tds-form-input-visual-checkbox:before {
  opacity: 0;
}

.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]:checked+.tds-form-input .tds-form-input-visual-checkbox:before {
  animation: turn-on-before 1s;
  transform: rotate(-270deg);
}

.tds-theme--replicant .tds-form-input-hidden-choice[type=checkbox]:checked+.tds-form-input .tds-form-input-visual-checkbox:after {
  animation: turn-on-after 1s;
  transform: rotate(-270deg);
}

@keyframes turn-on {
  /* wait till part-way through blinking */
  0% {
    transform: translateX(0);
  }

  48% {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--tds-plus--transform-size));
  }
}

@keyframes turn-on-before {
  /* Blink */
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  /* Move */
  48% {
    opacity: 1;
    transform: rotate(0deg);
  }

  to {
    opacity: 0;
    transform: rotate(-270deg);
  }
}

@keyframes turn-on-after {
  /* Blink */
  0% {
    opacity: 1;
    transform: rotate(90deg);
  }

  8% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  /* Move */
  48% {
    opacity: 1;
    transform: rotate(90deg);
  }

  to {
    opacity: 0;
    transform: rotate(-270deg);
  }
}

@keyframes turn-off {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  32% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

/* -- Link Theme Adjustments
----------------------------------------------------------------------------- */

.tds-theme--replicant .tds-link {
  box-shadow: 0 .5px 0 0 hsla(0,0%,73%,.75);
  transition: color .33s ease,box-shadow .33s ease;
}

/* Replicant theme only has one link style, so below we set the primary
and secondary modifiers to always apply the same link styling as the default,
unmodified link style.
*/

.tds-theme--replicant .tds-link:is(:hover,.tds--hover):not([disabled],.tds--disabled) {
  --tds-text--color: var(--tds-theme-foreground-high-contrast);

  box-shadow: 0 1.5px 0 0 rgba(var(--tds-color--rgb-shade), 1);
  transition: color .33s ease,box-shadow .33s ease;
}

.tds-theme--replicant .tds-link--primary,.tds-theme--replicant .tds-link--secondary {
  --tds-text--color: inherit;

  font-weight: var(--tds-font-weight--book, 400);
}

.tds-theme--replicant {
  --tds-modal--full-height: calc(100vh - var(--tds-size--8x));
  --tds-modal--full-width: calc(100vw - var(--tds-size--8x));
}

.tds-theme--replicant .tds-modal {
  background-color: transparent;
  border-radius: 0;
  bottom: auto;
  box-shadow: none;
  color: var(--tds-theme-foreground-high-contrast);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .33));
}

.tds-theme--replicant .tds-modal-content {
  overflow: auto;
}

.tds-theme--replicant .tds-modal:not(.tds-modal--sheet-right,.tds-modal--sheet-left) {
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/* Flip the centerpoint of the modal in RTL for fullscreen */

.tds-theme--replicant [dir=rtl] .tds-modal:not(.tds-modal--sheet-right,.tds-modal--sheet-left),.tds-theme--replicant [dir=rtl].tds-modal:not(.tds-modal--sheet-right,.tds-modal--sheet-left),[dir=rtl] .tds-theme--replicant .tds-modal:not(.tds-modal--sheet-right,.tds-modal--sheet-left),[dir=rtl].tds-theme--replicant .tds-modal:not(.tds-modal--sheet-right,.tds-modal--sheet-left) {
  left: unset;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
}

.tds-theme--replicant .tds-modal.tds-modal--sheet-right {
  right: 0;
  top: 0;
  transform: translateX(100%) translateY(0);
}

.tds-theme--replicant .tds-modal.tds-modal--sheet-right.tds-modal[open] {
  transform: translateX(0) translateY(0);
}

.tds-theme--replicant .tds-modal.tds-modal--sheet-left {
  left: 0;
  top: 0;
  transform: translateX(-100%) translateY(0);
}

.tds-theme--replicant .tds-modal.tds-modal--sheet-left.tds-modal[open] {
  transform: translateX(0) translateY(0);
}

.tds-theme--replicant .tds-modal:after,.tds-theme--replicant .tds-modal:before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tds-theme--replicant .tds-modal:before {
  background-color: var(--tds-theme-foreground-high-contrast);
  -webkit-clip-path: var(--tds-notch--outline);
          clip-path: var(--tds-notch--outline);
  opacity: 1;
  transition: .5s ease;
}

.tds-theme--replicant .tds-modal:after {
  background-color: var(--tds-theme-background-dialog);
  -webkit-clip-path: var(--tds-notch);
          clip-path: var(--tds-notch);
  opacity: 1;
  z-index: -1;
}

/* Flip the notch in RTL */

.tds-theme--replicant [dir=rtl] .tds-modal:after,.tds-theme--replicant [dir=rtl] .tds-modal:before,.tds-theme--replicant [dir=rtl].tds-modal:after,.tds-theme--replicant [dir=rtl].tds-modal:before,[dir=rtl] .tds-theme--replicant .tds-modal:after,[dir=rtl] .tds-theme--replicant .tds-modal:before,[dir=rtl].tds-theme--replicant .tds-modal:after,[dir=rtl].tds-theme--replicant .tds-modal:before {
  transform: rotateY(180deg);
}

.tds-theme--replicant .tds-modal[open]:before {
  animation: turn-on-modal-before 1s forwards;
}

/* prettier-ignore */

@keyframes turn-on-modal-before {
  0% { opacity: 1; }
  8% { opacity: .5; }
  16% { opacity: 1; }
  24% { opacity: .5; }
  32% { opacity: 1; }
  40% { opacity: .5; }
  48% { opacity: 1; }
  to { opacity: 1; }
}

.tds-theme--replicant .tds-modal-footer,.tds-theme--replicant .tds-modal-header {
  background-color: transparent;
}

@media (max-width:599px) {
  .tds-theme--replicant .tds-modal {
    inline-size: var(--tds-modal--full-width) !important;
  }

  .tds-theme--replicant .tds-modal--fullscreen {
    block-size: var(--tds-modal--full-height) !important;
  }
}

@media (min-width:600px) {
  .tds-theme--replicant .tds-modal--fullscreen {
    block-size: var(--tds-modal--full-height);
    inline-size: var(--tds-modal--full-width);
  }

  .tds-modal--fullscreen+.tds-modal-backdrop {
    display: block;
  }
}

.tds-theme--replicant .tds-modal-close {
  background-color: transparent;
  border-radius: 0;
  filter: var(--tds-glow--off);
  transition: .5s ease;
}

.tds-theme--replicant .tds-modal-close:focus,.tds-theme--replicant .tds-modal-close:hover {
  animation: tds-flicker--soft 1s forwards;
  filter: var(--tds-glow--bright);
  transition: .52s ease .48s;
}

.tds-theme--replicant .tds-modal-close-icon {
  block-size: var(--tds-size--2x);
  inline-size: var(--tds-size--2x);
}

/* TODO: Should modal sheet left/right flip in RTL? If not, the below
is consistent with the behavior of the other modals in RTL and we can
remove this comment */

.tds-theme--replicant [dir=rtl] .tds-modal.tds-modal--sheet-right,.tds-theme--replicant [dir=rtl].tds-modal.tds-modal--sheet-right,[dir=rtl] .tds-theme--replicant .tds-modal.tds-modal--sheet-right,[dir=rtl].tds-theme--replicant .tds-modal.tds-modal--sheet-right {
  left: unset;
  right: 0;
  top: 0;
  transform: translateX(100%) translateY(0);
}

.tds-theme--replicant [dir=rtl] .tds-modal.tds-modal--sheet-left,.tds-theme--replicant [dir=rtl].tds-modal.tds-modal--sheet-left,[dir=rtl] .tds-theme--replicant .tds-modal.tds-modal--sheet-left,[dir=rtl].tds-theme--replicant .tds-modal.tds-modal--sheet-left {
  left: 0;
  right: unset;
  top: 0;
  transform: translateX(-100%) translateY(0);
}

.tds-theme--replicant .tds-progress_bar {
  --tds-notch--outline-thin__progress:
    polygon(
      0 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 1.5px,
      1.5px 1.5px,
      1.5px calc(100% - 1.5px),
      calc(100% - 9.5px) calc(100% - 1.5px),
      calc(100% - 1.5px) calc(100% - 9.5px),
      calc(100% - 1.5px) 1.5px,
      0 1.5px
    );
  --tds-notch_progress: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  --tds-progress-bar--bar-color: transparent;
  --tds-progress-bar--border-radius: 1px;
  --tds-progress-bar--height: var(--tds-size--3x);

  background-color: transparent;
  box-shadow: none;
  padding: 4px;
}

/* TODO Add safaris support */

.tds-theme--replicant .tds-progress_bar-wrapper:before {
  background: var(--tds-theme-foreground-high-contrast);
  bottom: 0;

  /* clip-path: var(--tds-notch--outline-thin__progress); Seems to be broken */

  -webkit-clip-path: var(--tds-notch--outline-thin);

          clip-path: var(--tds-notch--outline-thin);
  content: "";
  display: block;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transition: .5s ease;
}

.tds-theme--replicant .tds-progress_bar::-webkit-progress-value {
  border-radius: 0;
  box-shadow: var(--tds-glow--medium);
  -webkit-clip-path: var(--tds-notch_progress);
          clip-path: var(--tds-notch_progress);
}

.tds-theme--replicant .tds-progress_bar::-webkit-progress-bar {
  box-shadow: none;
}

/* NOTE: moz-progress-bar === -webkit-progress-value */

.tds-progress_bar--primary::-moz-progress-bar {
  border-radius: 0;
  box-shadow: var(--tds-glow--medium);
  clip-path: var(--tds-notch_progress);
}

/* -- Status Message Theme Adjustments
----------------------------------------------------------------------------- */

.tds-theme--replicant .tds-status_msg {
  --tds-card--padding: 0;
}

.tds-theme--replicant .tds-status_msg--enclosed {
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  background-color: hsla(0,0%,50%,.125);
}

.tds-theme--replicant .tds-status_msg:not(.tds-card--open) .tds-icon {
  --tds-card--padding: 0;
}

.tds-theme--replicant .tds-status_msg .tds-card-body {
  padding: 0;
}

.tds-theme--replicant .tds-status_msg:not(.tds-card--layout-vertical) .tds-icon+.tds-card-body,.tds-theme--replicant .tds-status_msg:not(.tds-card--open) .tds-icon+.tds-card-body {
  -webkit-padding-start: var(--tds-size--1x);
          padding-inline-start: var(--tds-size--1x);
}

.tds-theme--replicant .tds-switch_toggle {
  --tds-border-radius--circle: 0;
  --tds-switch_toggle--radius: 0;
}

.tds-theme--replicant .tds-switch_toggle-track:after {
  background-color: var(--tds-theme-foreground-on-primary);
}

.tds-theme--replicant .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-track {
  background-color: var(--tds-color-white);
}

.tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-btn:last-child {
  right: 0;
}

.tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-btn:nth-last-child(2) {
  left: 0;
}

.tds-theme--replicant .tds-switch_toggle--label_inside .tds-switch_toggle-checkbox:checked~.tds-switch_toggle-btn {
  color: var(--tds-theme-foreground-on-primary);
}

/* -- Text Theme Adjustments
----------------------------------------------------------------------------- */

.tds-theme--replicant :is(h1,h2,.tds-text--h1,.tds-text--h2) {
  text-shadow: 0 0 var(--tds-size--1x) rgba(var(--tds-color--rgb-shade), .5);
}

.tds-theme--replicant .tds-text--caption {
  --tds-text--color: var(--tds-color-grey-55);
}

/* -- Button Theme Adjustments
----------------------------------------------------------------------------- */

.tds-theme--v6 {
  --tds-btn--font-size: var(--tds-font-size--20);
}

.tds-theme--v6 .tds-btn--large {
  --tds-border-radius--pill: 20px;
}

.tds-theme--v6 .tds-btn {
  text-transform: uppercase;
}

.tds-theme--v6 .tds-date-picker {
  --tds-day-radius: var(--tds-border-radius--circle);
  --tds-end-of-week-radius: var(--tds-size--half);
}

.tds-theme--v6 .tds-form-input-choice[type=checkbox],.tds-theme--v6 .tds-form-input-visual-checkbox {
  border-radius: var(--tds-size--half);
}

.tds-theme--v6 .tds-card:is(.tds-locale-selector-trigger,.tds-locale-selector-country) {
  border-radius: 12px;
}

.tds-theme--v6 .tds-animate--backdrop-backdrop,.tds-theme--v6 .tds-site-nav-item {
  border-radius: 12px;
}

.tds-theme--v6 .tds-tab-list {
  --tds-tab--border-radius: calc(var(--tds-height--pill)/2);
}

.tds-theme--v6 .tds-tab-list--legacy-vertical,.tds-theme--v6 .tds-tab-list--underline,.tds-theme--v6 .tds-tab-list--vertical {
  --tds-tab--border-radius: 0;
}

.tds-theme--v6 .tds-tooltip {
  border-radius: var(--tds-size--1x);
}

/******************************************************************************
 Global Alignment Utilities
******************************************************************************/

/* --- Container Alignment
---------------------------------------------------------------- */

.tds--align_center {
  display: block !important;
  margin: 0 auto !important;
}

.tds--align_start {
  -webkit-margin-end: auto !important;
  -webkit-margin-start: 0 !important;
  display: block !important;
          margin-inline-end: auto !important;
          margin-inline-start: 0 !important;
}

.tds--align_end {
  -webkit-margin-end: 0 !important;
  -webkit-margin-start: auto !important;
  display: block !important;
          margin-inline-end: 0 !important;
          margin-inline-start: auto !important;
}

/**
 * Animated Backdrop
 * - A generic utility that can be used across a variety of components
 * - This is designed to mimic the appearance of a selected state,
 * - but move from one item to the next as the user's selection changes

 Basic HTML Structure

 <parent>
  <div class="tds--animated-backdrop" />

  <item />
  <item />
  <item />
 </parent

 */

.tds--animated-backdrop {

  /* Positional data set via js */
  block-size: var(--tds-animate-backdrop-height, 0);
  inline-size: var(--tds-animate-backdrop-width, 0);
  left: var(--tds-animate-backdrop-left, 0);

  /* Note: Visibility needs to not have a default value here, otherwise it will override the tokenized value */
  opacity: var(--tds-animate-backdrop-opacity, 0);
  position: absolute;
  top: var(--tds-animate-backdrop-top, 0);

  /* z-index: -1; */
  transition: var(--tds-animate-backdrop-transition, opacity .5s ease, visibility 0s 0s);
  visibility: var(--tds-animate-backdrop-visibility);
}

/*
 * Pre-Normalization Utils
 * - Kept for backwards compatibility
 * - Todo: Fully convert to normalized versions
 */

.tds-component-preview,:root {
  --tds-animate-transition-duration--medium: 600ms;
  --tds-animate-transition-duration--short: 500ms;
  --tds-animate-transition-function--base: linear;
  --tds-animate-transition-function--mktg: cubic-bezier(0.165, 0.84, 0.44, 1);
  --tds-animate-transition-property: opacity;
  --tds-animate-transition_duration--long: 1500ms;

  /* Normalized Tokens - TODO: Move tokens to this group as we refactor each animation */
  --tds--fade-in: tds--fade-in 1s ease;
  --tds--pulsing: tds--pulsing 1.5s infinite ease-in-out;
  --tds--rotating: tds--rotating 1.5s infinite linear;
}

.tds-animate--fade_out {
  opacity: var(--tds-opacity--transparent);
}

.tds-animate--fade_in,.tds-animate--fade_out {
  transition:
    var(--tds-animate-transition-property) var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--base);
}

.tds-animate--fade_in {
  opacity: var(--tds-opacity--100);
}

.tds-animate_small--to_reveal {
  opacity: var(--tds-opacity--transparent);
  transform: translate3d(0, 30px, 0);
  transition:
    transform var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--mktg),
    opacity var(--tds-animate-transition-duration--short)
    var(--tds-animate-transition-function--mktg);
  z-index: -1;
}

.tds-animate_small--reveal .tds-animate_small--to_reveal {
  opacity: var(--tds-opacity--100);
  transform: translateZ(0);
  z-index: auto;
}

.tds-animate_large--to_reveal {
  opacity: var(--tds-opacity--transparent);
  transform: translate3d(0, 100px, 0);
  z-index: -1;
}

.tds-animate_large--revealed {
  opacity: var(--tds-opacity--100);
  transform: translateZ(0);
  transition:
    transform var(--tds-animate-transition_duration--long)
    var(--tds-animate-transition-function--mktg),
    opacity var(--tds-animate-transition_duration--long)
    var(--tds-animate-transition-function--mktg);
  z-index: auto;
}

.tds-animate--squish {
  transition: translate .1s ease;
}

.tds-animate--bounce {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: tds-keyframe--bounce;
}

@keyframes tds-keyframe--fade_out {
  0% {
    opacity: var(--tds-opacity--100);
  }

  to {
    opacity: var(--tds-opacity--transparent);
  }
}

@keyframes tds-keyframe--fade_in {
  0% {
    opacity: var(--tds-opacity--transparent);
  }

  to {
    opacity: var(--tds-opacity--100);
  }
}

@keyframes tds-keyframe--make_smaller {
  0% {
    max-block-size: 100vh;
    opacity: var(--tds-opacity--100);
  }

  to {
    max-block-size: 0;
    opacity: var(--tds-opacity--transparent);
  }
}

@keyframes tds-keyframe--make_larger {
  0% {
    max-block-size: 0;
    opacity: var(--tds-opacity--transparent);
  }

  to {
    max-block-size: 100vh;
    opacity: var(--tds-opacity--100);
  }
}

@keyframes tds-keyframe--bounce {
  0%,20%,50%,80%,to {
    transform: translateY(0);
  }

  40% {
    transform: translateY(5px);
  }

  60% {
    transform: translateY(3px);
  }
}

/**
 * Normalized Animation Utils
 */

.tds--fade-in {
  animation: var(--tds--fade-in);
}

@keyframes tds--fade-in {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* TODO:
 * Distinct motion vs fade handling for prefers-reduced-motion
 * https://issues.teslamotors.com/browse/AWSM-3770
 */

.tds--rotating {
  animation: var(--tds--rotating);
}

@keyframes tds--rotating {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.tds--pulsing {
  animation: var(--tds--pulsing);
}

@keyframes tds--pulsing {
  0% {
    opacity: 0;
  }

  20% {
    opacity: .7;
  }

  to {
    opacity: 0;
  }
}

/******************************************************************************
 Global Column Utilites
******************************************************************************/

.tds-columns {
  -moz-column-gap: 20px;
       column-gap: 20px;
  -moz-column-width: auto;
       column-width: auto;
  display: block;
}

.tds-columns--two {
  -moz-column-count: 2;
       column-count: 2;
}

.tds-columns--three {
  -moz-column-count: 3;
       column-count: 3;
}

/* Desktop modifiers for screens larger than 840px */

@media (min-width:600px) {
  .tds-columns--two_on_desktop {
    -moz-column-count: 2;
         column-count: 2;
  }

  .tds-columns--three_on_desktop {
    -moz-column-count: 3;
         column-count: 3;
  }
}

.tds-component-preview,:root,[lang*=en],[lang*=en] body,html[lang*=en] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=ar-AE],[lang=ar-AE] body,html[lang=ar-AE] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-arabic), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-arabic), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=he-IL],[lang=he-IL] body,html[lang=he-IL] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-hebrew), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-hebrew), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=th-TH],[lang=th-TH] body,html[lang=th-TH] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-thai), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-thai), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=ko-KR],[lang=ko-KR] body,html[lang=ko-KR] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-korean), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-korean), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=ja-JP],[lang=ja-JP] body,html[lang=ja-JP] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-japanese), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-japanese), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=zh-CN],[lang=zh-CN] body,html[lang=zh-CN] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-chinese-simplified), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-chinese-simplified), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

[lang=zh-HK],[lang=zh-HK] body,html[lang=zh-HK] {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-chinese-hk), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-chinese-hk), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

:is([lang=zh-MO],[lang=zh-TW]),:is([lang=zh-MO],[lang=zh-TW]) body,html:is([lang=zh-MO],[lang=zh-TW]) {
  --tds-font-family--combined: var(--tds-font-family-latin), var(--tds-font-family-chinese-traditional), var(--tds-font-family) !important;
  --tds-font-family-combined: var(--tds-font-family-latin), var(--tds-font-family-chinese-traditional), var(--tds-font-family) !important;

  font-family: var(--tds-font-family-combined, --tds-base-font_family, system);
}

.tds--prevent-scroll {
  overflow: hidden;
}

.tds--product-name {
  white-space: nowrap;
}

.tds-fullscreen-ios {
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/******************************************************************************
 Global Padding Utilites
******************************************************************************/

.tds--padding--small {
  padding: var(--tds-size--1x) !important;
}

.tds--padding {
  padding: var(--tds-size--2x) !important;
}

.tds--padding--large {
  padding: var(--tds-size--3x) !important;
}

/* Remove Horizontal Padding */

.tds--no_horizontal_padding {
  -webkit-padding-end: 0 !important;
  -webkit-padding-start: 0 !important;
          padding-inline-end: 0 !important;
          padding-inline-start: 0 !important;
}

.tds--no_vertical_padding {
  -webkit-padding-after: 0 !important;
  -webkit-padding-before: 0 !important;
          padding-block-end: 0 !important;
          padding-block-start: 0 !important;
}

.tds--no_padding {
  padding: 0 !important;
}

.tds--horizontal_padding--small {
  -webkit-padding-end: var(--tds-size--1x) !important;
  -webkit-padding-start: var(--tds-size--1x) !important;
          padding-inline-end: var(--tds-size--1x) !important;
          padding-inline-start: var(--tds-size--1x) !important;
}

.tds--horizontal_padding {
  -webkit-padding-end: var(--tds-size--2x) !important;
  -webkit-padding-start: var(--tds-size--2x) !important;
          padding-inline-end: var(--tds-size--2x) !important;
          padding-inline-start: var(--tds-size--2x) !important;
}

.tds--horizontal_padding--large {
  -webkit-padding-end: var(--tds-size--3x) !important;
  -webkit-padding-start: var(--tds-size--3x) !important;
          padding-inline-end: var(--tds-size--3x) !important;
          padding-inline-start: var(--tds-size--3x) !important;
}

.tds--vertical_padding--small {
  -webkit-padding-after: var(--tds-size--1x) !important;
  -webkit-padding-before: var(--tds-size--1x) !important;
          padding-block-end: var(--tds-size--1x) !important;
          padding-block-start: var(--tds-size--1x) !important;
}

.tds--vertical_padding {
  -webkit-padding-after: var(--tds-size--2x) !important;
  -webkit-padding-before: var(--tds-size--2x) !important;
          padding-block-end: var(--tds-size--2x) !important;
          padding-block-start: var(--tds-size--2x) !important;
}

.tds--vertical_padding--large {
  -webkit-padding-after: var(--tds-size--3x) !important;
  -webkit-padding-before: var(--tds-size--3x) !important;
          padding-block-end: var(--tds-size--3x) !important;
          padding-block-start: var(--tds-size--3x) !important;
}

@media (max-width:599px) {
  .tds--gutterless_on_small {
    -webkit-padding-start: 0 !important;
    -webkit-padding-end: 0 !important;
            padding-inline-end: 0 !important;
            padding-inline-start: 0 !important;
  }
}

.tds-sticky--left,.tds-sticky--top {
  margin: 0;
  position: sticky;
  z-index: 1;
}

.tds-sticky--top {
  top: -1px;
}

.tds-sticky--left {
  left: -1px;
}

/******************************************************************************
 Global Visibility Utilites
******************************************************************************/

/* Hide something from view and from assistive devices */

.tds--is_hidden {
  display: none !important;
}

/* Hide something visually, but still accessible for assistive devices */

.tds--is_visually_hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  block-size: 1px;
  border: 0;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/* Show a previously `visibility: hidden;` element */

.tds--is_visible {
  visibility: visible;
}

/* Inverse of the above. Hide something visually, but leave space for the element in the browser  */

.tds--is_invisible {
  visibility: hidden;
}

/* HideOn Classes: 1:1 Map to TDS Breakpoints -- release in Q3 */

@media (max-width:599px) {
  .tds--hideon-phone-only {
    display: none !important;
  }
}

@media (min-width:600px) and (max-width:899px) {
  .tds--hideon-tablet-portrait-only {
    display: none !important;
  }
}

@media (min-width:600px) {
  .tds--hideon-tablet-portrait-up {
    display: none !important;
  }
}

@media (min-width:900px) and (max-width:1199px) {
  .tds--hideon-tablet-landscape-only {
    display: none !important;
  }
}

@media (min-width:900px) {
  .tds--hideon-tablet-landscape-up {
    display: none !important;
  }
}

@media (min-width:1200px) and (max-width:1799px) {
  .tds--hideon-desktop-only {
    display: none !important;
  }
}

@media (min-width:1200px) {
  .tds--hideon-desktop-up {
    display: none !important;
  }
}

@media (min-width:1800px) {
  .tds--hideon-desktop-large-up {
    display: none !important;
  }
}

/*# sourceMappingURL=index.css.map */