/* Generated from admitted Foundation native controls; semantic colors inherit the shell. */


:is(.display-settings, .theme-control-surface) {
  --tm-border-width-medium: max(2px, 0.125rem);
  --tm-focus-width: max(3px, 0.1875rem);
  --tm-focus-offset: max(2px, 0.125rem);
  --tm-form-target-size: 2.75rem;
  --tm-form-field-gap: 0.5rem;
  --tm-form-range-value-min-inline-size: 4ch;
}

:is(.display-settings, .theme-control-surface) .range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tm-form-field-gap);
}

:is(.display-settings, .theme-control-surface) .range-control > input[type="range"] {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--tm-form-target-size);
}

:is(.display-settings, .theme-control-surface) .range-control > output {
  min-inline-size: var(--tm-form-range-value-min-inline-size);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--tm-space-3, .75rem);
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row] > [data-theme-control-label] {
  min-inline-size: 0;
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row][data-theme-control-stacked] {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--tm-space-3, .75rem);
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row][data-theme-control-stacked] > [data-theme-control-widget] {
  justify-self: start;
  max-inline-size: 100%;
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row][data-theme-control-stacked="center"] > [data-theme-control-label],
:is(.display-settings, .theme-control-surface) [data-theme-control-row][data-theme-control-stacked="center"] > [data-theme-control-widget] {
  justify-self: center;
  text-align: center;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-compact] {
  max-inline-size: 22rem;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-positions] {
  position: relative;
  display: flex;
  gap: 1em;
  inline-size: max-content;
  max-inline-size: 100%;
  padding: .25em;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-ready] > input[type="range"] {
  position: absolute;
  inset: .25em;
  inline-size: calc(100% - .5em);
  block-size: 2.75em;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  background: transparent;
  z-index: 1;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-ready] > input::-webkit-slider-thumb {
  appearance: none;
  inline-size: 7em;
  block-size: 2.75em;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-ready] > input::-moz-range-thumb {
  inline-size: 7em;
  block-size: 2.75em;
  border: 0;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-position] {
  display: none;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-ready] > [data-theme-range-position] {
  display: grid;
  place-items: center;
  flex: 0 1 7em;
  inline-size: 7em;
  min-block-size: 2.75em;
  position: relative;
  pointer-events: none;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-position]::before {
  content: "";
  position: absolute;
  inline-size: 2.75em;
  block-size: 2.75em;
  border: var(--tm-border-width-medium) solid currentcolor;
  border-radius: 999rem;
  box-sizing: border-box;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-current] {
  background: var(--tm-color-primary);
  color: var(--tm-color-on-primary);
  border-radius: 999rem;
  border: var(--tm-border-width-medium) double currentcolor;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-current]::before {
  content: none;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-labels="all"] {
  inline-size: 15em;
  max-inline-size: 100%;
  gap: .35em;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-labels="all"][data-theme-range-ready] > [data-theme-range-position] {
  flex: 1 1 0;
  inline-size: 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-labels="all"] > [data-theme-range-position]::before {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 999rem;
}

:is(.display-settings, .theme-control-surface) [data-theme-range-labels="all"][data-theme-range-ready] > input[type="range"] {
  block-size: calc(100% - .5em);
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-ready]:focus-within {
  outline: var(--tm-focus-width) solid var(--tm-color-focus);
  outline-offset: var(--tm-focus-offset);
  border-radius: 999rem;
}

:is(.display-settings, .theme-control-surface) input[type="range"][data-theme-range-focus]:focus {
  outline: var(--tm-focus-width) solid var(--tm-color-focus);
  outline-offset: var(--tm-focus-offset);
}

@media (forced-colors: active) {
  :is(.display-settings, .theme-control-surface) [data-theme-range-current] {
    color: HighlightText;
    background: Highlight;
    forced-color-adjust: none;
  }
}

:is(.display-settings, .theme-control-surface) .switch-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tm-space-3, .75rem);
  position: relative;
  isolation: isolate;
}

:is(.display-settings, .theme-control-surface) .switch-control > label {
  grid-area: 1 / 1;
  position: static;
  cursor: pointer;
}

:is(.display-settings, .theme-control-surface) .switch-control > label::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  cursor: inherit;
}

:is(.display-settings, .theme-control-surface) .switch-control > input[type="checkbox"],
:is(.display-settings, .theme-control-surface) .switch-control > .switch-button-track {
  grid-area: 1 / 2;
  inline-size: 4.5em;
  min-block-size: 2.75em;
  margin: 0;
}

:is(.display-settings, .theme-control-surface) .switch-control > input[type="checkbox"] {
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

:is(.display-settings, .theme-control-surface) .switch-control > .switch-button-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding: .2em;
  border: var(--tm-border-width-medium, .125rem) solid currentcolor;
  border-radius: 999rem;
  pointer-events: none;
  box-sizing: border-box;
}

:is(.display-settings, .theme-control-surface) .switch-control .switch-button-thumb {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  line-height: 1;
  text-align: center;
  grid-area: 1 / 1;
  min-inline-size: 1.75em;
  min-block-size: 1.75em;
  border-radius: 999rem;
  color: var(--tm-color-on-primary);
  background: var(--tm-color-primary);
}

:is(.display-settings, .theme-control-surface) .switch-control > input:checked ~ .switch-button-track {
  border-style: double;
}

:is(.display-settings, .theme-control-surface) .switch-control > input:checked ~ .switch-button-track .switch-button-thumb {
  grid-column: 2;
}

:is(.display-settings, .theme-control-surface) .switch-control:has(> input:focus),
:is(.display-settings, .theme-control-surface) .switch-control:hover:not(:has(> input:disabled)) {
  outline: var(--tm-focus-width, .1875rem) solid var(--tm-color-focus);
  outline-offset: var(--tm-focus-offset, .1875rem);
}

:is(.display-settings, .theme-control-surface) .switch-control > input:disabled,
:is(.display-settings, .theme-control-surface) .switch-control > input:disabled ~ label {
  cursor: not-allowed;
}

:is(.display-settings, .theme-control-surface) .switch-control > input:disabled ~ .switch-button-track {
  border-style: dotted;
}

@media (forced-colors: active) {
  :is(.display-settings, .theme-control-surface) .switch-control > .switch-button-track {
    color: CanvasText;
    background: Canvas;
    border-color: CanvasText;
  }

  :is(.display-settings, .theme-control-surface) .switch-control .switch-button-thumb {
    color: HighlightText;
    background: Highlight;
    forced-color-adjust: none;
  }
}

:is(.display-settings, .theme-control-surface) .switch-control[data-theme-control-stacked] {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

:is(.display-settings, .theme-control-surface) .switch-control[data-theme-control-stacked] > label {
  grid-area: 1 / 1;
  justify-self: center;
  text-align: center;
}

:is(.display-settings, .theme-control-surface) .switch-control[data-theme-control-stacked] > input[type="checkbox"],
:is(.display-settings, .theme-control-surface) .switch-control[data-theme-control-stacked] > .switch-button-track {
  grid-area: 2 / 1;
  justify-self: center;
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row][data-theme-control-stacked="widget-center"] > [data-theme-control-label] {
  justify-self: stretch;
  text-align: start;
}

:is(.display-settings, .theme-control-surface) [data-theme-control-row][data-theme-control-stacked="widget-center"] > [data-theme-control-widget] {
  justify-self: center;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .75em;
  padding: .25em;
  max-inline-size: 100%;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input[type="range"] {
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  min-block-size: 2.75em;
  color: inherit;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input::-webkit-slider-runnable-track {
  block-size: .5em;
  border: var(--tm-border-width-medium) solid currentcolor;
  border-radius: 999rem;
  background: var(--tm-color-surface);
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input::-moz-range-track {
  block-size: .5em;
  border: var(--tm-border-width-medium) solid currentcolor;
  border-radius: 999rem;
  background: var(--tm-color-surface);
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input::-webkit-slider-thumb {
  appearance: none;
  box-sizing: border-box;
  inline-size: 1.25em;
  block-size: 1.25em;
  margin-block-start: calc(-.375em - var(--tm-border-width-medium));
  border: var(--tm-border-width-medium) double currentcolor;
  border-radius: 999rem;
  background: var(--tm-color-primary);
  color: var(--tm-color-on-primary);
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input::-moz-range-thumb {
  box-sizing: border-box;
  inline-size: 1.25em;
  block-size: 1.25em;
  border: var(--tm-border-width-medium) double currentcolor;
  border-radius: 999rem;
  background: var(--tm-color-primary);
  color: var(--tm-color-on-primary);
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric]:focus-within {
  outline: var(--tm-focus-width) solid var(--tm-color-focus);
  outline-offset: var(--tm-focus-offset);
  border-radius: 999rem;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input[data-theme-range-focus]:focus {
  outline: none;
}

:is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input:disabled {
  cursor: default;
}

@media (forced-colors: active) {
  :is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input::-webkit-slider-thumb {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  :is(.display-settings, .theme-control-surface) .range-control[data-theme-range-numeric] > input::-moz-range-thumb {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}