@font-face {
  font-family: "ABC Monument Grotesk Trial";
  src: url('assets/ABCMonumentGrotesk-Regular-Trial.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "ABC Monument Grotesk Trial";
  src: url('assets/ABCMonumentGrotesk-Bold-Trial.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "ABC Monument Grotesk Mono Trial";
  src: url('assets/ABCMonumentGroteskMono-Regular-Trial.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-size: .75rem;
  --palette-outer-circle-size: 31px;
  --controls-radius: 2px;

  /* --margin: 10px; */
  --margin: 18px;
  --controls-width: 314px;
  --panel-offset: calc(var(--controls-width) + var(--margin));


  /* color */
  --usdc-blue-deselected: #527FC3;
  --usdc-blue-deselected-foreground: #063479;
  --usdc-blue-drop-shadow: #042960;
  --usdc-blue-main: #0B53BF;
  --usdc-blue-separator: #5889D2;
  --usdc-blue-slider-track: #5381C7;
  --usdc-blue-tool: #0848A7;
  --usdc-blue-hover: #83A7DD;
  --usdc-blue-slider-hover: #6A97DA;

  --spruce-deselected: #295532;
  --spruce-deselected-foreground: #9BC0A2;
  --spruce-drop-shadow: #0C221080;
  --spruce-main: #094D17;
  --spruce-separator: #032009;
  --spruce-slider-track: #567C5E;
  --spruce-tool: #0A4015;
  --spruce-hover: #54835D;
  --spruce-slider-hover: #729278;

  --fir-deselected: #355445;
  --fir-deselected-foreground: #839C8F;
  --fir-drop-shadow: #000000;
  --fir-main: #05351D;
  --fir-separator: #2E6047;
  --fir-slider-track: #436554;
  --fir-tool: #092416;
  --fir-hover: #6E897B;
  --fir-slider-hover: #618372;

  --olive-deselected: #b3ae48;
  --olive-deselected-foreground: #6b670e;
  --olive-drop-shadow: #656108;
  --olive-main: #a29c12;
  --olive-separator: #a8a336;
  --olive-slider-track: #b4b061;
  --olive-tool: #969127;
  --olive-hover: #CAC66D;
  --olive-slider-hover: #BEBB74;

  --sky-deselected: #A6F2FF;
  --sky-deselected-foreground: #3297A9;
  --sky-drop-shadow: #187181;
  --sky-main: #66E7FF;
  --sky-separator: #14B1CD;
  --sky-slider-track: #ABF2FF;
  --sky-tool: #58DDF5;
  --sky-hover: #D4F9FF;
  --sky-slider-hover: #CAF7FF;

  --cotton-deselected: #ececec;
  --cotton-deselected-foreground: #a2a2a2;
  --cotton-drop-shadow: #8B877A;
  --cotton-main: #ededed;
  --cotton-separator: #ffffff;
  --cotton-slider-track: #F4F4F4;
  --cotton-tool: #e4e4e4;
  --cotton-hover: #F7F7F7;
  --cotton-slider-hover: #FCFCFC;

  --pine-deselected: #716F2D;
  --pine-deselected-foreground: #313005;
  --pine-drop-shadow: #201F05;
  --pine-main: #5D5A09;
  --pine-separator: #888645;
  --pine-slider-track: #797739;
  --pine-tool: #504E09;
  --pine-hover: #989657;
  --pine-slider-hover: #8C8A53;

  --dark-blue-deselected: #3D5679;
  --dark-blue-deselected-foreground: #000000;
  --dark-blue-drop-shadow: #000000;
  --dark-blue-main: #001F4B;
  --dark-blue-separator: #567197;
  --dark-blue-slider-track: #41587A;
  --dark-blue-tool: #001B40;
  --dark-blue-hover: #7388A4;
  --dark-blue-slider-hover: #5B7291;

  --iris-deselected: #a5a8f7;
  --iris-deselected-foreground: #5155ca;
  --iris-drop-shadow: #494EC3;
  --iris-main: #8f94ff;
  --iris-separator: #969af9;
  --iris-slider-track: #a8acfc;
  --iris-tool: #8084f2;
  --iris-hover: #C7C9FF;
  --iris-slider-hover: #BDC0FF;

  --sienna-deselected: #FACDB5;
  --sienna-deselected-foreground: #9C725B;
  --sienna-drop-shadow: #00000040;
  --sienna-main: #FFA97A;
  --sienna-separator: #9C725B;
  --sienna-slider-track: #FACDB5;
  --sienna-tool: #F5A276;
  --sienna-hover: #FFE3D4;
  --sienna-slider-hover: #FFDECA;

  --linen-deselected: #E4E1D5;
  --linen-deselected-foreground: #837F72;
  --linen-drop-shadow: #8B887A;
  --linen-main: #D8D5C9;
  --linen-separator: #FAF9F4;
  --linen-slider-track: #E5E3DA;
  --linen-tool: #C8C5BB;
  --linen-hover: #F4F2EB;
  --linen-slider-hover: #EDECE8;

  --canary-deselected: #fef86b;
  --canary-deselected-foreground: #a19b00;
  --canary-drop-shadow: #65610880;
  --canary-main: #fff84a;
  --canary-separator: #a19b00;
  --canary-slider-track: #fffb9d;
  --canary-tool: #f2eb4e;
  /* --canary-hover: #FFFCAE; */
  --canary-hover: #FFFCBF;
  --canary-slider-hover: #FFFDD1;

  --color-transition: 0ms;
}
/* When controls are hidden, we reserve 0 space, but width remains defined */
body.controls-hidden{
  --panel-offset: 0px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  /* background: rgb(217, 217, 217); */
  /* overflow: scroll; */
}
/* CANVAS */
canvas {
  position:fixed;
  top:50%;
  /* left: 50%; */
  left: calc((100vw - var(--controls-width) - var(--margin))/2 + var(--margin) + var(--controls-width));
  left: calc((100vw - var(--panel-offset)) / 2 + var(--panel-offset));
  transform:translate(-50%, -50%);
  /* box-shadow: #05241c 0px 7px 29px 0px; */
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;

  z-index: 0;
  transition: left 500ms;
}
/* LOGO */
#logo-container {
  position: fixed;
  top: var(--margin);
  right: var(--margin);
  /* width: 100px; */
  height: 30px;
  height: 20px;
}
#logo-container svg{
  width: auto;
  height: 100%;
}

/* CONTROLS */
#controls-container {
  position: relative;
  margin-top: var(--margin);
  margin-left:  var(--margin);
  z-index: 10;

  padding-bottom: var(--margin);
}

#controls {
  display: flex;
  background: #EDEDED;
  background: #F7F6F6;
  padding: 11px;
  border-radius: 6px;
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); */
  box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-weight: normal;
  font-size: var(--font-size);
}

#controls.vertical {
  flex-direction: column;
  width: var(--controls-width);
}
#controls.vertical .input-group:not(#palette-container, .color-container) {
  margin-bottom: 35px;
}
#controls.vertical #transition-container .radio-group {
  margin-bottom: 35px;
}
#controls.vertical #transition-container {
  margin-bottom: 0;
}
#controls.vertical input[type="range"] {
  width: 100%;
  margin-top: 5px;
}

#controls.hide,
#layout-toggle.hide {
  display: none;
}
.hide {
  display: none !important;
}


.input-label {
  font-family: 'ABC Monument Grotesk Mono Trial', sans-serif;
  font-weight: normal;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 14px;
}

.radio-group {
  display: flex;
}

#button-container {
  display: flex;
  gap: 5px;
}

button {
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-size: var(--font-size);
  line-height: 17px;
  padding: 2px 7px 1px 7px;
  cursor: pointer;
  margin-bottom: 8px;

  background: #000000;
  color: #FFFFFF;

  border: none;
  border-radius: var(--controls-radius);
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
  background: #2b2b2b;
}

label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.flex-control {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  align-items: end;
  width: 100%;
}
.number-input {
  width: 50px;
  text-align: right;
  border: 1px solid #ccc;
  padding: 1px 0px;
  border-radius: 4px;
  border-radius: var(--controls-radius);
  /* border: none;
  background: transparent; */
}

.input-group {
  position: relative;
}
/* .input-group:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: black;
}
 */






.disabled-label {
  cursor: not-allowed;
}
input[type="radio"]:disabled + span {
  opacity: 0.3;
}
input[type="radio"]:disabled {
  cursor: not-allowed;
}

label:has(input[type="radio"]:not(:disabled)) {
  cursor: pointer;
}
input[type="radio"] {
  cursor: pointer;
}
/* input[type="radio"]:disabled + label:hover {
  color: inherit;
  border: none;
} */
#speed-label.disabled-label {
  opacity: 0.3;
}
#speed-label.disabled-label + input {
  cursor: not-allowed;
}
.disabled-label + #speed-input{
  color: rgba(0, 0, 0, 0.3);
}

#transition-container div.disabled-label {
  opacity: 0.3;
}

.stroke-width-control {
  display: none;
}


#palette-container {
  background: white;
  border-radius: 5px;
  padding: 14px;
}
#palette-container.hide {
  display: none;
}
.color-checkbox {
  cursor: pointer;
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 15px;
  min-width: 100%;
}
.color-pair {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 150ms;
}
.circle {
  width: var(--palette-outer-circle-size);
  height: var(--palette-outer-circle-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner, .inner2 {
  width: calc(var(--palette-outer-circle-size)/2);
  height: calc(var(--palette-outer-circle-size)/2);
  border-radius: 50%;
}
.circle-border {
  /* border: 1px solid black; */
  border: .8px solid #3f3f3f;
}
.color-toggle-container {
  padding: 5px;
  background: var(--cotton-deselected);
  border-radius: 5px;
}
.color-pair:not(.color-toggle-container):hover .outer {
  transform: scale(1.1);
}
.color-toggle-row {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
}


.color-toggle-container {
  background: var(--cotton-deselected);
}
/* hover */
.color-toggle-container:hover{
  background: var(--cotton-hover);
}
/* selected (either approach below will work) */
.color-toggle-container.selected,
.color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

/* optional: don’t darken hovered selected */
/* .color-toggle-container.selected:hover,
.color-toggle-container[aria-checked="true"]:hover{
  background: var(--cotton-deselected);
} */





/* ICONS */
.base-radio-group,
.transform-radio-group,
.transition-type-radio-group {
  gap: 6px;
  margin-top: 3px;
}
.radio-icon-container {
  width: 100%;
  height: 40px;
  background: white;
  padding: 6px;
  border-radius: 4px;
  border-radius: var(--controls-radius);

  background: rgb(255, 255, 255);
}
.transform-radio-group .radio-icon-container {
  width: fit-content;
}
.radio-icon-container:not(.disabled-label):hover {
  /* background: rgb(255, 255, 255); */
  
}
input[type="radio"]:disabled + span:hover {
  color: inherit;
  border: none;
  outline: none;
}
.radio-icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.base-radio-group input[type="radio"]:checked + .radio-icon-container,
.transform-radio-group input[type="radio"]:checked + .radio-icon-container,
.transition-type-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: rgb(255, 255, 255);
  /* border: 1px solid black; */
}
.disabled-label .radio-icon-container {
  outline: none !important;
}

.base-radio-group input[type="radio"]:checked + .radio-icon-container:hover,
.transform-radio-group input[type="radio"]:checked + .radio-icon-container:hover,
.transition-type-radio-group input[type="radio"]:checked + .radio-icon-container:hover {
}
.disabled-label .radio-icon-container {
  background: transparent;
}


input[type="number"] {
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-weight: normal;
  font-size: var(--font-size);
}






/* EXPORT CONTROLS */
#export-container {
  display: flex;
  flex-direction: column;
  gap: 5px;

  position: fixed;
  bottom: var(--margin);
  right: var(--margin);
  z-index: 10;

  width: 180px;

  background: #F7F6F6;
  padding: 10px;
  border-radius: var(--controls-radius);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-weight: normal;
  font-size: var(--font-size);

  display: none;
}
#export-container label {
  font-weight: bold;
}

#export-options {
  padding: 5px;
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-weight: normal;
  font-size: var(--font-size);

  border: 1px solid #ccc;
  border-radius: var(--controls-radius);
}

/* NEW EXPORTS */
.export-row {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
}

.export-dropdown {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-weight: normal;
  font-size: var(--font-size);
  line-height: 17px;
  color: #000000;
  background-color: var(--cotton-hover);
  border: none;
  padding: 2px 24px 1px 7px;
  border-radius: var(--controls-radius);
  flex: 1;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 11px) calc(50% - 1px),
    calc(100% - 7px) calc(50% - 1px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.export-dropdown:hover,
.export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

.export-dropdown:disabled {
  background-color: var(--cotton-deselected);
  color: var(--cotton-deselected-foreground);
  cursor: not-allowed;
}
.export-button {
  width: 100%;
  margin-bottom: 0;
  position: relative;
}

.export-button + .export-button {
  margin-top: 5px;
}

.export-button:disabled {
  cursor: not-allowed !important;
}

.export-button[data-disabled-reason]:disabled:hover::after {
  content: attr(data-disabled-reason);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 180px;
  max-width: 240px;
  padding: 6px 8px;
  border-radius: var(--controls-radius);
  background: #000000;
  color: #ffffff;
  font-family: 'ABC Monument Grotesk Trial', sans-serif;
  font-size: var(--font-size);
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}









/* NEW INTERFACE */
#controls {
  background: var(--cotton-tool);
  color: #393939;
  box-shadow: 0 4px 7px 0 var(--cotton-drop-shadow);
}
/* HIDE native radios but keep them accessible */
.radio-group.segmented input[type="radio"],
.transition-type-radio-group input[type="radio"],
.base-radio-group input[type="radio"],
.transform-radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* SEGMENTED (text-only) radio buttons */
.radio-group.segmented,
.transition-type-radio-group,
.transform-radio-group,
.base-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 8px;
}
.base-radio-group label {
  flex: 0 0 calc(50% - 1.5px);
  max-width: calc((100% - 3px) / 2);
}
/* Each clickable “pill” */
.radio-group.segmented label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}
/* Make labels clickable areas */
.transition-type-radio-group label,
.base-radio-group label,
.transform-radio-group label {
  cursor: pointer;
  flex: 1;
  display: flex;
}
.transform-radio-group label {
  flex: 0 0 auto;
}



/* The visible button body (the text container) */
.radio-group.segmented label > span {
  display: inline-block;
  padding: 2px 7px 1px 7px;
  border-radius: var(--controls-radius);
  transition:
    background var(--color-transition),
    color var(--color-transition);
  font-size: var(--font-size);
  line-height: 17px;

  background: var(--cotton-deselected);
  color: var(--cotton-deselected-foreground);
}
/* The span wrapper around the image */
.transition-type-radio-group .radio-icon-container,
.base-radio-group .radio-icon-container,
.transform-radio-group .radio-icon-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: var(--controls-radius);
  transition: all var(--color-transition);

  background: var(--cotton-deselected);
}
.transition-type-radio-group .radio-icon-container svg,
.base-radio-group .radio-icon-container svg,
.transform-radio-group .radio-icon-container svg{
  fill: var(--cotton-deselected-foreground);
}
.transform-radio-group .radio-icon-container {
  width: 40px;
  height: 40px;
}
.transform-radio-group .radio-icon-container{
  padding: 0;
}

/* HOVER state */
.radio-group.segmented label:hover > span,
.transition-type-radio-group label:hover .radio-icon-container,
.base-radio-group label:hover .radio-icon-container,
.transform-radio-group label:hover .radio-icon-container {
  background: var(--cotton-hover);
  color: #000000;
}
.transition-type-radio-group label:hover .radio-icon-container svg,
.base-radio-group label:hover .radio-icon-container svg,
.transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.radio-group.segmented input[type="radio"]:checked + span,
.transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.base-radio-group input[type="radio"]:checked + .radio-icon-container,
.transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #ffffff;
  color: #000000;
}
.transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}

/* Disabled option */
.radio-group.segmented input[type="radio"]:disabled + span,
.transition-type-radio-group input[type="radio"]:disabled + .radio-icon-container,
.transform-radio-group input[type="radio"]:disabled + .radio-icon-container,
.base-radio-group .disabled-label,
#transition-container:has(.disabled-label) {
  opacity: 0.2;
  cursor: not-allowed;
  display: none;
}
.panel-hr {
  opacity: 0.5;
  border-top: 1px solid var(--cotton-separator);
  border-color: var(--cotton-separator);
  margin-bottom: 35px;
}









/* SLIDERS AND NUMBER INPUT */
/* base input */
#controls .slider{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  /* margin-top: 5px; */
  margin-top: 1px;
  cursor: pointer;
}
/* track (WebKit/Chromium) */
#controls .slider::-webkit-slider-runnable-track
{
  height: 3px;
  border-radius: 3px;
  background:  var(--cotton-slider-track);
}
/* track (Firefox) */
#controls input.slider::-moz-range-track{
  height: 3px;
  background: var(--cotton-slider-track);
  border-radius: 3px;
}

/* WebKit thumb */
#controls .slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 24px;
  border-radius: 1px;
  border: none;
  box-shadow:none;
  margin-top: calc((3px - 24px) / 2);

  background: #ffffff;
}

/* Firefox thumb */
#controls .slider::-moz-range-thumb{
  width: 6px;
  height: 24px;
  border-radius: 1px;
  border: none;
  box-shadow: none;

  background: #ffffff;
}

/* WebKit / Chromium */
#controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--cotton-slider-hover);
}

/* Firefox */
#controls .slider:hover::-moz-range-track {
  background: var(--cotton-slider-hover);
}

/* disabled */
#controls .slider:disabled,
.flex-control:has(.disabled-label) {
  cursor: not-allowed;
  opacity: .6;
  display: none;
}

.slider-first { 
  margin-bottom: 8px;
}

.input-label-size, .input-label-appearance, .input-label-export {
  margin-bottom: 8px;
}



/* Inline, text-like number inputs inside your controls */
#controls input.number-input {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
  font: inherit;
  color: inherit;
  /* width: 5ch; */
  /* min-width: 3ch; */
  text-align: right;
  outline: none;
  vertical-align: baseline;
}

/* Remove the browser spinners */
#controls input.number-input::-webkit-outer-spin-button,
#controls input.number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  margin-left: 2px;
  opacity: 1;
}
#controls input.number-input {
  -moz-appearance: textfield; /* Firefox */
}














/* DYNAMIC COLORS */

/* The visible button body (the text container) */
.theme-canary .color-toggle-container {
  background: var(--canary-deselected);
}
/* hover */
.theme-canary .color-toggle-container:hover{
  background: var(--canary-hover);
}
/* selected (either approach below will work) */
.theme-canary .color-toggle-container.selected,
.theme-canary .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-canary button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-canary button{
  background: var(--canary-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-canary button:hover:not(:disabled),
body:has(#controls.hide) .theme-canary button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-canary #controls {
  background: var(--canary-tool);
  color: #1F1F1F;

  box-shadow: 0 4px 7px 0 var(--canary-drop-shadow);
}
.theme-canary .radio-group.segmented label > span {
  background: var(--canary-deselected);
  color: var(--canary-deselected-foreground);
}
/* The span wrapper around the image */
.theme-canary .transition-type-radio-group .radio-icon-container,
.theme-canary .base-radio-group .radio-icon-container,
.theme-canary .transform-radio-group .radio-icon-container {
  background: var(--canary-deselected);
}
.theme-canary .transition-type-radio-group .radio-icon-container svg,
.theme-canary .base-radio-group .radio-icon-container svg,
.theme-canary .transform-radio-group .radio-icon-container svg{
  fill: var(--canary-deselected-foreground);
}

/* HOVER state */
.theme-canary .radio-group.segmented label:hover > span,
.theme-canary .transition-type-radio-group label:hover .radio-icon-container,
.theme-canary .base-radio-group label:hover .radio-icon-container,
.theme-canary .transform-radio-group label:hover .radio-icon-container {
  background: var(--canary-hover);
  color: #000000;
}
.theme-canary .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-canary .base-radio-group label:hover .radio-icon-container svg,
.theme-canary .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-canary .radio-group.segmented input[type="radio"]:checked + span,
.theme-canary .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-canary .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-canary .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-canary .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-canary .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-canary .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-canary .panel-hr {
  border-color: var(--canary-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-canary #controls .slider::-webkit-slider-runnable-track
{
  background: var(--canary-slider-track);
}
.theme-canary  #controls input.slider::-moz-range-track{
  background: var(--canary-slider-track);
}
.theme-canary #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-canary #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-canary #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--canary-slider-hover);
}
.theme-canary #controls .slider:hover::-moz-range-track {
  background: var(--canary-slider-hover);
}





/* The visible button body (the text container) */
.theme-sienna .color-toggle-container {
  background: var(--sienna-deselected);
}
/* hover */
.theme-sienna .color-toggle-container:hover{
  background: var(--sienna-hover);
}
/* selected (either approach below will work) */
.theme-sienna .color-toggle-container.selected,
.theme-sienna .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-sienna button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-sienna button{
  background: var(--sienna-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-sienna button:hover:not(:disabled),
body:has(#controls.hide) .theme-sienna button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-sienna #controls {
  background: var(--sienna-tool);
  color: #393939;

  box-shadow: 0 4px 7px 0 var(--sienna-drop-shadow);
}
.theme-sienna .radio-group.segmented label > span {
  background: var(--sienna-deselected);
  color: var(--sienna-deselected-foreground);
}
/* The span wrapper around the image */
.theme-sienna .transition-type-radio-group .radio-icon-container,
.theme-sienna .base-radio-group .radio-icon-container,
.theme-sienna .transform-radio-group .radio-icon-container {
  background: var(--sienna-deselected);
}
.theme-sienna .transition-type-radio-group .radio-icon-container svg,
.theme-sienna .base-radio-group .radio-icon-container svg,
.theme-sienna .transform-radio-group .radio-icon-container svg{
  fill: var(--sienna-deselected-foreground);
}

/* HOVER state */
.theme-sienna .radio-group.segmented label:hover > span,
.theme-sienna .transition-type-radio-group label:hover .radio-icon-container,
.theme-sienna .base-radio-group label:hover .radio-icon-container,
.theme-sienna .transform-radio-group label:hover .radio-icon-container {
  background: var(--sienna-hover);
  color: #000000;
}
.theme-sienna .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-sienna .base-radio-group label:hover .radio-icon-container svg,
.theme-sienna .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-sienna .radio-group.segmented input[type="radio"]:checked + span,
.theme-sienna .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-sienna .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-sienna .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-sienna .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-sienna .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-sienna .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-sienna .panel-hr {
  border-color: var(--sienna-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-sienna #controls .slider::-webkit-slider-runnable-track
{
  background: var(--sienna-slider-track);
}
.theme-sienna  #controls input.slider::-moz-range-track{
  background: var(--sienna-slider-track);
}
.theme-sienna #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-sienna #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-sienna #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--sienna-slider-hover);
}
.theme-sienna #controls .slider:hover::-moz-range-track {
  background: var(--sienna-slider-hover);
}






/* The visible button body (the text container) */
.theme-spruce .color-toggle-container {
  background: var(--spruce-deselected);
}
/* hover */
.theme-spruce .color-toggle-container:hover{
  background: var(--spruce-hover);
}
/* selected (either approach below will work) */
.theme-spruce .color-toggle-container.selected,
.theme-spruce .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-spruce button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-spruce button{
  background: var(--spruce-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-spruce button:hover:not(:disabled),
body:has(#controls.hide) .theme-spruce button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-spruce #controls {
  background: var(--spruce-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--spruce-drop-shadow);
}
.theme-spruce .radio-group.segmented label > span {
  background: var(--spruce-deselected);
  color: var(--spruce-deselected-foreground);
}
/* The span wrapper around the image */
.theme-spruce .transition-type-radio-group .radio-icon-container,
.theme-spruce .base-radio-group .radio-icon-container,
.theme-spruce .transform-radio-group .radio-icon-container {
  background: var(--spruce-deselected);
}
.theme-spruce .transition-type-radio-group .radio-icon-container svg,
.theme-spruce .base-radio-group .radio-icon-container svg,
.theme-spruce .transform-radio-group .radio-icon-container svg{
  fill: var(--spruce-deselected-foreground);
}

/* HOVER state */
.theme-spruce .radio-group.segmented label:hover > span,
.theme-spruce .transition-type-radio-group label:hover .radio-icon-container,
.theme-spruce .base-radio-group label:hover .radio-icon-container,
.theme-spruce .transform-radio-group label:hover .radio-icon-container {
  background: var(--spruce-hover);
  color: #000000;
}
.theme-spruce .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-spruce .base-radio-group label:hover .radio-icon-container svg,
.theme-spruce .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-spruce .radio-group.segmented input[type="radio"]:checked + span,
.theme-spruce .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-spruce .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-spruce .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-spruce .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-spruce .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-spruce .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-spruce .panel-hr {
  border-color: var(--spruce-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-spruce #controls .slider::-webkit-slider-runnable-track
{
  background: var(--spruce-slider-track);
}
.theme-spruce  #controls input.slider::-moz-range-track{
  background: var(--spruce-slider-track);
}
.theme-spruce #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-spruce #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-spruce #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--spruce-slider-hover);
}
.theme-spruce #controls .slider:hover::-moz-range-track {
  background: var(--spruce-slider-hover);
}







/* The visible button body (the text container) */
.theme-iris .color-toggle-container {
  background: var(--iris-deselected);
}
/* hover */
.theme-iris .color-toggle-container:hover{
  background: var(--iris-hover);
}
/* selected (either approach below will work) */
.theme-iris .color-toggle-container.selected,
.theme-iris .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-iris button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-iris button{
  background: var(--iris-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-iris button:hover:not(:disabled),
body:has(#controls.hide) .theme-iris button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-iris #controls {
  background: var(--iris-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--iris-drop-shadow);
}
.theme-iris .radio-group.segmented label > span {
  background: var(--iris-deselected);
  color: var(--iris-deselected-foreground);
}
/* The span wrapper around the image */
.theme-iris .transition-type-radio-group .radio-icon-container,
.theme-iris .base-radio-group .radio-icon-container,
.theme-iris .transform-radio-group .radio-icon-container {
  background: var(--iris-deselected);
}
.theme-iris .transition-type-radio-group .radio-icon-container svg,
.theme-iris .base-radio-group .radio-icon-container svg,
.theme-iris .transform-radio-group .radio-icon-container svg{
  fill: var(--iris-deselected-foreground);;
}

/* HOVER state */
.theme-iris .radio-group.segmented label:hover > span,
.theme-iris .transition-type-radio-group label:hover .radio-icon-container,
.theme-iris .base-radio-group label:hover .radio-icon-container,
.theme-iris .transform-radio-group label:hover .radio-icon-container {
  background: var(--iris-hover);
  color: #000000;
}
.theme-iris .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-iris .base-radio-group label:hover .radio-icon-container svg,
.theme-iris .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-iris .radio-group.segmented input[type="radio"]:checked + span,
.theme-iris .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-iris .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-iris .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-iris .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-iris .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-iris .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-iris .panel-hr {
  border-color: var(--iris-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-iris #controls .slider::-webkit-slider-runnable-track
{
  background: var(--iris-slider-track);
}
.theme-iris  #controls input.slider::-moz-range-track{
  background: var(--iris-slider-track);
}
.theme-iris #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-iris #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-iris #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--iris-slider-hover);
}
.theme-iris #controls .slider:hover::-moz-range-track {
  background: var(--iris-slider-hover);
}








/* The visible button body (the text container) */
.theme-olive .color-toggle-container {
  background: var(--olive-deselected);
}
/* hover */
.theme-olive .color-toggle-container:hover{
  background: var(--olive-hover);
}
/* selected (either approach below will work) */
.theme-olive .color-toggle-container.selected,
.theme-olive .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-olive button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-olive button{
  background: var(--olive-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-olive button:hover:not(:disabled),
body:has(#controls.hide) .theme-olive button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-olive #controls {
  background: var(--olive-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--olive-drop-shadow);
}
.theme-olive .radio-group.segmented label > span {
  background: var(--olive-deselected);
  color: var(--olive-deselected-foreground);
}
/* The span wrapper around the image */
.theme-olive .transition-type-radio-group .radio-icon-container,
.theme-olive .base-radio-group .radio-icon-container,
.theme-olive .transform-radio-group .radio-icon-container {
  background: var(--olive-deselected);
}
.theme-olive .transition-type-radio-group .radio-icon-container svg,
.theme-olive .base-radio-group .radio-icon-container svg,
.theme-olive .transform-radio-group .radio-icon-container svg{
  fill: var(--olive-deselected-foreground);;
}

/* HOVER state */
.theme-olive .radio-group.segmented label:hover > span,
.theme-olive .transition-type-radio-group label:hover .radio-icon-container,
.theme-olive .base-radio-group label:hover .radio-icon-container,
.theme-olive .transform-radio-group label:hover .radio-icon-container {
  background: var(--olive-hover);
  color: #000000;
}
.theme-olive .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-olive .base-radio-group label:hover .radio-icon-container svg,
.theme-olive .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-olive .radio-group.segmented input[type="radio"]:checked + span,
.theme-olive .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-olive .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-olive .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-olive .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-olive .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-olive .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-olive .panel-hr {
  border-color: var(--olive-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-olive #controls .slider::-webkit-slider-runnable-track
{
  background: var(--olive-slider-track);
}
.theme-olive  #controls input.slider::-moz-range-track{
  background: var(--olive-slider-track);
}
.theme-olive #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-olive #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-olive #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--olive-slider-hover);
}
.theme-olive #controls .slider:hover::-moz-range-track {
  background: var(--olive-slider-hover);
}






/* The visible button body (the text container) */
.theme-usdc-blue .color-toggle-container {
  background: var(--usdc-blue-deselected);
}
/* hover */
.theme-usdc-blue .color-toggle-container:hover{
  background: var(--usdc-blue-hover);
}
/* selected (either approach below will work) */
.theme-usdc-blue .color-toggle-container.selected,
.theme-usdc-blue .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-usdc-blue button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-usdc-blue button{
  background: var(--usdc-blue-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-usdc-blue button:hover:not(:disabled),
body:has(#controls.hide) .theme-usdc-blue button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-usdc-blue #controls {
  background: var(--usdc-blue-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--usdc-blue-drop-shadow);
}
.theme-usdc-blue .radio-group.segmented label > span {
  background: var(--usdc-blue-deselected);
  color: var(--usdc-blue-deselected-foreground);
}
/* The span wrapper around the image */
.theme-usdc-blue .transition-type-radio-group .radio-icon-container,
.theme-usdc-blue .base-radio-group .radio-icon-container,
.theme-usdc-blue .transform-radio-group .radio-icon-container {
  background: var(--usdc-blue-deselected);
}
.theme-usdc-blue .transition-type-radio-group .radio-icon-container svg,
.theme-usdc-blue .base-radio-group .radio-icon-container svg,
.theme-usdc-blue .transform-radio-group .radio-icon-container svg{
  fill: var(--usdc-blue-deselected-foreground);;
}

/* HOVER state */
.theme-usdc-blue .radio-group.segmented label:hover > span,
.theme-usdc-blue .transition-type-radio-group label:hover .radio-icon-container,
.theme-usdc-blue .base-radio-group label:hover .radio-icon-container,
.theme-usdc-blue .transform-radio-group label:hover .radio-icon-container {
  background: var(--usdc-blue-hover);
  color: #000000;
}
.theme-usdc-blue .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-usdc-blue .base-radio-group label:hover .radio-icon-container svg,
.theme-usdc-blue .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-usdc-blue .radio-group.segmented input[type="radio"]:checked + span,
.theme-usdc-blue .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-usdc-blue .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-usdc-blue .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-usdc-blue .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-usdc-blue .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-usdc-blue .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-usdc-blue .panel-hr {
  border-color: var(--usdc-blue-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-usdc-blue #controls .slider::-webkit-slider-runnable-track
{
  background: var(--usdc-blue-slider-track);
}
.theme-usdc-blue  #controls input.slider::-moz-range-track{
  background: var(--usdc-blue-slider-track);
}
.theme-usdc-blue #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-usdc-blue #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-usdc-blue #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--usdc-blue-slider-hover);
}
.theme-usdc-blue #controls .slider:hover::-moz-range-track {
  background: var(--usdc-blue-slider-hover);
}






/* The visible button body (the text container) */
.theme-dark-blue .color-toggle-container {
  background: var(--dark-blue-deselected);
}
/* hover */
.theme-dark-blue .color-toggle-container:hover{
  background: var(--dark-blue-hover);
}
/* selected (either approach below will work) */
.theme-dark-blue .color-toggle-container.selected,
.theme-dark-blue .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-dark-blue button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-dark-blue button{
  background: var(--dark-blue-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-dark-blue button:hover:not(:disabled),
body:has(#controls.hide) .theme-dark-blue button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-dark-blue #controls {
  background: var(--dark-blue-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--dark-blue-drop-shadow);
}
.theme-dark-blue .radio-group.segmented label > span {
  background: var(--dark-blue-deselected);
  color: var(--dark-blue-deselected-foreground);
}
/* The span wrapper around the image */
.theme-dark-blue .transition-type-radio-group .radio-icon-container,
.theme-dark-blue .base-radio-group .radio-icon-container,
.theme-dark-blue .transform-radio-group .radio-icon-container {
  background: var(--dark-blue-deselected);
}
.theme-dark-blue .transition-type-radio-group .radio-icon-container svg,
.theme-dark-blue .base-radio-group .radio-icon-container svg,
.theme-dark-blue .transform-radio-group .radio-icon-container svg{
  fill: var(--dark-blue-deselected-foreground);;
}

/* HOVER state */
.theme-dark-blue .radio-group.segmented label:hover > span,
.theme-dark-blue .transition-type-radio-group label:hover .radio-icon-container,
.theme-dark-blue .base-radio-group label:hover .radio-icon-container,
.theme-dark-blue .transform-radio-group label:hover .radio-icon-container {
  background: var(--dark-blue-hover);
  color: #000000;
}
.theme-dark-blue .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-dark-blue .base-radio-group label:hover .radio-icon-container svg,
.theme-dark-blue .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-dark-blue .radio-group.segmented input[type="radio"]:checked + span,
.theme-dark-blue .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-dark-blue .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-dark-blue .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-dark-blue .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-dark-blue .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-dark-blue .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-dark-blue .panel-hr {
  border-color: var(--dark-blue-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-dark-blue #controls .slider::-webkit-slider-runnable-track
{
  background: var(--dark-blue-slider-track);
}
.theme-dark-blue  #controls input.slider::-moz-range-track{
  background: var(--dark-blue-slider-track);
}
.theme-dark-blue #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-dark-blue #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-dark-blue #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--dark-blue-slider-hover);
}
.theme-dark-blue #controls .slider:hover::-moz-range-track {
  background: var(--dark-blue-slider-hover);
}







/* The visible button body (the text container) */
.theme-fir .color-toggle-container {
  background: var(--fir-deselected);
}
/* hover */
.theme-fir .color-toggle-container:hover{
  background: var(--fir-hover);
}
/* selected (either approach below will work) */
.theme-fir .color-toggle-container.selected,
.theme-fir .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-fir button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-fir button{
  background: var(--fir-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-fir button:hover:not(:disabled),
body:has(#controls.hide) .theme-fir button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-fir #controls {
  background: var(--fir-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--fir-drop-shadow);
}
.theme-fir .radio-group.segmented label > span {
  background: var(--fir-deselected);
  color: var(--fir-deselected-foreground);
}
/* The span wrapper around the image */
.theme-fir .transition-type-radio-group .radio-icon-container,
.theme-fir .base-radio-group .radio-icon-container,
.theme-fir .transform-radio-group .radio-icon-container {
  background: var(--fir-deselected);
}
.theme-fir .transition-type-radio-group .radio-icon-container svg,
.theme-fir .base-radio-group .radio-icon-container svg,
.theme-fir .transform-radio-group .radio-icon-container svg{
  fill: var(--fir-deselected-foreground);;
}

/* HOVER state */
.theme-fir .radio-group.segmented label:hover > span,
.theme-fir .transition-type-radio-group label:hover .radio-icon-container,
.theme-fir .base-radio-group label:hover .radio-icon-container,
.theme-fir .transform-radio-group label:hover .radio-icon-container {
  background: var(--fir-hover);
  color: #000000;
}
.theme-fir .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-fir .base-radio-group label:hover .radio-icon-container svg,
.theme-fir .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-fir .radio-group.segmented input[type="radio"]:checked + span,
.theme-fir .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-fir .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-fir .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-fir .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-fir .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-fir .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-fir .panel-hr {
  border-color: var(--fir-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-fir #controls .slider::-webkit-slider-runnable-track
{
  background: var(--fir-slider-track);
}
.theme-fir  #controls input.slider::-moz-range-track{
  background: var(--fir-slider-track);
}
.theme-fir #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-fir #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-fir #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--fir-slider-hover);
}
.theme-fir #controls .slider:hover::-moz-range-track {
  background: var(--fir-slider-hover);
}






/* The visible button body (the text container) */
.theme-pine .color-toggle-container {
  background: var(--pine-deselected);
}
/* hover */
.theme-pine .color-toggle-container:hover{
  background: var(--pine-hover);
}
/* selected (either approach below will work) */
.theme-pine .color-toggle-container.selected,
.theme-pine .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-pine button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-pine button{
  background: var(--pine-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-pine button:hover:not(:disabled),
body:has(#controls.hide) .theme-pine button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-pine #controls {
  background: var(--pine-tool);
  color: #E9E9E9;

  box-shadow: 0 4px 7px 0 var(--pine-drop-shadow);
}
.theme-pine .radio-group.segmented label > span {
  background: var(--pine-deselected);
  color: var(--pine-deselected-foreground);
}
/* The span wrapper around the image */
.theme-pine .transition-type-radio-group .radio-icon-container,
.theme-pine .base-radio-group .radio-icon-container,
.theme-pine .transform-radio-group .radio-icon-container {
  background: var(--pine-deselected);
}
.theme-pine .transition-type-radio-group .radio-icon-container svg,
.theme-pine .base-radio-group .radio-icon-container svg,
.theme-pine .transform-radio-group .radio-icon-container svg{
  fill: var(--pine-deselected-foreground);;
}

/* HOVER state */
.theme-pine .radio-group.segmented label:hover > span,
.theme-pine .transition-type-radio-group label:hover .radio-icon-container,
.theme-pine .base-radio-group label:hover .radio-icon-container,
.theme-pine .transform-radio-group label:hover .radio-icon-container {
  background: var(--pine-hover);
  color: #000000;
}
.theme-pine .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-pine .base-radio-group label:hover .radio-icon-container svg,
.theme-pine .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-pine .radio-group.segmented input[type="radio"]:checked + span,
.theme-pine .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-pine .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-pine .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-pine .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-pine .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-pine .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-pine .panel-hr {
  border-color: var(--pine-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-pine #controls .slider::-webkit-slider-runnable-track
{
  background: var(--pine-slider-track);
}
.theme-pine  #controls input.slider::-moz-range-track{
  background: var(--pine-slider-track);
}
.theme-pine #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-pine #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-pine #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--pine-slider-hover);
}
.theme-pine #controls .slider:hover::-moz-range-track {
  background: var(--pine-slider-hover);
}








/* The visible button body (the text container) */
.theme-sky .color-toggle-container {
  background: var(--sky-deselected);
}
/* hover */
.theme-sky .color-toggle-container:hover{
  background: var(--sky-hover);
}
/* selected (either approach below will work) */
.theme-sky .color-toggle-container.selected,
.theme-sky .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-sky button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-sky button{
  background: var(--sky-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-sky button:hover:not(:disabled),
body:has(#controls.hide) .theme-sky button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-sky #controls {
  background: var(--sky-tool);
  color: #393939;

  box-shadow: 0 4px 7px 0 var(--sky-drop-shadow);
}
.theme-sky .radio-group.segmented label > span {
  background: var(--sky-deselected);
  color: var(--sky-deselected-foreground);
}
/* The span wrapper around the image */
.theme-sky .transition-type-radio-group .radio-icon-container,
.theme-sky .base-radio-group .radio-icon-container,
.theme-sky .transform-radio-group .radio-icon-container {
  background: var(--sky-deselected);
}
.theme-sky .transition-type-radio-group .radio-icon-container svg,
.theme-sky .base-radio-group .radio-icon-container svg,
.theme-sky .transform-radio-group .radio-icon-container svg{
  fill: var(--sky-deselected-foreground);;
}

/* HOVER state */
.theme-sky .radio-group.segmented label:hover > span,
.theme-sky .transition-type-radio-group label:hover .radio-icon-container,
.theme-sky .base-radio-group label:hover .radio-icon-container,
.theme-sky .transform-radio-group label:hover .radio-icon-container {
  background: var(--sky-hover);
  color: #000000;
}
.theme-sky .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-sky .base-radio-group label:hover .radio-icon-container svg,
.theme-sky .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-sky .radio-group.segmented input[type="radio"]:checked + span,
.theme-sky .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-sky .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-sky .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-sky .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-sky .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-sky .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-sky .panel-hr {
  border-color: var(--sky-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-sky #controls .slider::-webkit-slider-runnable-track
{
  background: var(--sky-slider-track);
}
.theme-sky  #controls input.slider::-moz-range-track{
  background: var(--sky-slider-track);
}
.theme-sky #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-sky #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-sky #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--sky-slider-hover);
}
.theme-sky #controls .slider:hover::-moz-range-track {
  background: var(--sky-slider-hover);
}





/* The visible button body (the text container) */
.theme-linen .color-toggle-container {
  background: var(--linen-deselected);
}
/* hover */
.theme-linen .color-toggle-container:hover{
  background: var(--linen-hover);
}
/* selected (either approach below will work) */
.theme-linen .color-toggle-container.selected,
.theme-linen .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-linen button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-linen button{
  background: var(--linen-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-linen button:hover:not(:disabled),
body:has(#controls.hide) .theme-linen button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-linen #controls {
  background: var(--linen-tool);
  color: #393939;

  box-shadow: 0 4px 7px 0 var(--linen-drop-shadow);
}
.theme-linen .radio-group.segmented label > span {
  background: var(--linen-deselected);
  color: var(--linen-deselected-foreground);
}
/* The span wrapper around the image */
.theme-linen .transition-type-radio-group .radio-icon-container,
.theme-linen .base-radio-group .radio-icon-container,
.theme-linen .transform-radio-group .radio-icon-container {
  background: var(--linen-deselected);
}
.theme-linen .transition-type-radio-group .radio-icon-container svg,
.theme-linen .base-radio-group .radio-icon-container svg,
.theme-linen .transform-radio-group .radio-icon-container svg{
  fill: var(--linen-deselected-foreground);;
}

/* HOVER state */
.theme-linen .radio-group.segmented label:hover > span,
.theme-linen .transition-type-radio-group label:hover .radio-icon-container,
.theme-linen .base-radio-group label:hover .radio-icon-container,
.theme-linen .transform-radio-group label:hover .radio-icon-container {
  background: var(--linen-hover);
  color: #000000;
}
.theme-linen .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-linen .base-radio-group label:hover .radio-icon-container svg,
.theme-linen .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-linen .radio-group.segmented input[type="radio"]:checked + span,
.theme-linen .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-linen .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-linen .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-linen .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-linen .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-linen .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-linen .panel-hr {
  border-color: var(--linen-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-linen #controls .slider::-webkit-slider-runnable-track
{
  background: var(--linen-slider-track);
}
.theme-linen  #controls input.slider::-moz-range-track{
  background: var(--linen-slider-track);
}
.theme-linen #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-linen #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-linen #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--linen-slider-hover);
}
.theme-linen #controls .slider:hover::-moz-range-track {
  background: var(--linen-slider-hover);
}






/* The visible button body (the text container) */
.theme-cotton .color-toggle-container {
  background: var(--cotton-deselected);
}
/* hover */
.theme-cotton .color-toggle-container:hover{
  background: var(--cotton-hover);
}
/* selected (either approach below will work) */
.theme-cotton .color-toggle-container.selected,
.theme-cotton .color-toggle-container[aria-checked="true"]{
  background: #ffffff;
}

.theme-cotton button {
  background: #000000;
  color: #FFFFFF;
}
body:has(#controls.hide) .theme-cotton button{
  background: var(--cotton-hover);
  color: #000000;
}
body:has(#controls.hide) .theme-cotton button:hover:not(:disabled),
body:has(#controls.hide) .theme-cotton button:focus-visible:not(:disabled){
  background: rgba(255, 255, 255, 0.75);
}
.theme-cotton #controls {
  background: var(--cotton-tool);
  color: #393939;

  box-shadow: 0 4px 7px 0 var(--cotton-drop-shadow);
}
.theme-cotton .radio-group.segmented label > span {
  background: var(--cotton-deselected);
  color: var(--cotton-deselected-foreground);
}
/* The span wrapper around the image */
.theme-cotton .transition-type-radio-group .radio-icon-container,
.theme-cotton .base-radio-group .radio-icon-container,
.theme-cotton .transform-radio-group .radio-icon-container {
  background: var(--cotton-deselected);
}
.theme-cotton .transition-type-radio-group .radio-icon-container svg,
.theme-cotton .base-radio-group .radio-icon-container svg,
.theme-cotton .transform-radio-group .radio-icon-container svg{
  fill: var(--cotton-deselected-foreground);;
}

/* HOVER state */
.theme-cotton .radio-group.segmented label:hover > span,
.theme-cotton .transition-type-radio-group label:hover .radio-icon-container,
.theme-cotton .base-radio-group label:hover .radio-icon-container,
.theme-cotton .transform-radio-group label:hover .radio-icon-container {
  background: var(--cotton-hover);
  color: #000000;
}
.theme-cotton .transition-type-radio-group label:hover .radio-icon-container svg,
.theme-cotton .base-radio-group label:hover .radio-icon-container svg,
.theme-cotton .transform-radio-group label:hover .radio-icon-container svg{
  fill: #000000;
}

/* SELECTED state */
.theme-cotton .radio-group.segmented input[type="radio"]:checked + span,
.theme-cotton .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-cotton .base-radio-group input[type="radio"]:checked + .radio-icon-container,
.theme-cotton .transform-radio-group input[type="radio"]:checked + .radio-icon-container {
  background: #FFFFFF;
  color: #000000;
}
.theme-cotton .transition-type-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-cotton .base-radio-group input[type="radio"]:checked + .radio-icon-container svg,
.theme-cotton .transform-radio-group input[type="radio"]:checked + .radio-icon-container svg{
  fill: #000000;
}
.theme-cotton .panel-hr {
  border-color: var(--cotton-separator);
}

/* SLIDERS / NUMBER INPUTS */
.theme-cotton #controls .slider::-webkit-slider-runnable-track
{
  background: var(--cotton-slider-track);
}
.theme-cotton  #controls input.slider::-moz-range-track{
  background: var(--cotton-slider-track);
}
.theme-cotton #controls .slider::-webkit-slider-thumb{
  background: #FFFFFF;
}
.theme-cotton #controls .slider::-moz-range-thumb{
  background: #FFFFFF;
}
.theme-cotton #controls .slider:hover::-webkit-slider-runnable-track {
  background: var(--cotton-slider-hover);
}
.theme-cotton #controls .slider:hover::-moz-range-track {
  background: var(--cotton-slider-hover);
}

/* Keep this repo's export controls opt-in so the base transplant stays intact. */
#export-container.has-export-controls {
  display: flex;
}

body.controls-hidden #export-container.has-export-controls {
  display: none;
}

#export-container.has-export-controls.theme-canary {
  background: var(--canary-tool);
  color: #1F1F1F;
  box-shadow: 0 4px 7px 0 var(--canary-drop-shadow);
}

#export-container.has-export-controls.theme-canary .export-dropdown {
  background-color: var(--canary-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-canary .export-dropdown:hover,
#export-container.has-export-controls.theme-canary .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-canary .export-dropdown:disabled {
  background-color: var(--canary-deselected);
  color: var(--canary-deselected-foreground);
}

#export-container.has-export-controls.theme-sienna {
  background: var(--sienna-tool);
  color: #393939;
  box-shadow: 0 4px 7px 0 var(--sienna-drop-shadow);
}

#export-container.has-export-controls.theme-sienna .export-dropdown {
  background-color: var(--sienna-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-sienna .export-dropdown:hover,
#export-container.has-export-controls.theme-sienna .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-sienna .export-dropdown:disabled {
  background-color: var(--sienna-deselected);
  color: var(--sienna-deselected-foreground);
}

#export-container.has-export-controls.theme-spruce {
  background: var(--spruce-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--spruce-drop-shadow);
}

#export-container.has-export-controls.theme-spruce .export-dropdown {
  background-color: var(--spruce-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-spruce .export-dropdown:hover,
#export-container.has-export-controls.theme-spruce .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-spruce .export-dropdown:disabled {
  background-color: var(--spruce-deselected);
  color: var(--spruce-deselected-foreground);
}

#export-container.has-export-controls.theme-iris {
  background: var(--iris-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--iris-drop-shadow);
}

#export-container.has-export-controls.theme-iris .export-dropdown {
  background-color: var(--iris-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-iris .export-dropdown:hover,
#export-container.has-export-controls.theme-iris .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-iris .export-dropdown:disabled {
  background-color: var(--iris-deselected);
  color: var(--iris-deselected-foreground);
}

#export-container.has-export-controls.theme-olive {
  background: var(--olive-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--olive-drop-shadow);
}

#export-container.has-export-controls.theme-olive .export-dropdown {
  background-color: var(--olive-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-olive .export-dropdown:hover,
#export-container.has-export-controls.theme-olive .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-olive .export-dropdown:disabled {
  background-color: var(--olive-deselected);
  color: var(--olive-deselected-foreground);
}

#export-container.has-export-controls.theme-usdc-blue {
  background: var(--usdc-blue-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--usdc-blue-drop-shadow);
}

#export-container.has-export-controls.theme-usdc-blue .export-dropdown {
  background-color: var(--usdc-blue-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-usdc-blue .export-dropdown:hover,
#export-container.has-export-controls.theme-usdc-blue .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-usdc-blue .export-dropdown:disabled {
  background-color: var(--usdc-blue-deselected);
  color: var(--usdc-blue-deselected-foreground);
}

#export-container.has-export-controls.theme-dark-blue {
  background: var(--dark-blue-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--dark-blue-drop-shadow);
}

#export-container.has-export-controls.theme-dark-blue .export-dropdown {
  background-color: var(--dark-blue-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-dark-blue .export-dropdown:hover,
#export-container.has-export-controls.theme-dark-blue .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-dark-blue .export-dropdown:disabled {
  background-color: var(--dark-blue-deselected);
  color: var(--dark-blue-deselected-foreground);
}

#export-container.has-export-controls.theme-fir {
  background: var(--fir-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--fir-drop-shadow);
}

#export-container.has-export-controls.theme-fir .export-dropdown {
  background-color: var(--fir-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-fir .export-dropdown:hover,
#export-container.has-export-controls.theme-fir .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-fir .export-dropdown:disabled {
  background-color: var(--fir-deselected);
  color: var(--fir-deselected-foreground);
}

#export-container.has-export-controls.theme-pine {
  background: var(--pine-tool);
  color: #E9E9E9;
  box-shadow: 0 4px 7px 0 var(--pine-drop-shadow);
}

#export-container.has-export-controls.theme-pine .export-dropdown {
  background-color: var(--pine-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-pine .export-dropdown:hover,
#export-container.has-export-controls.theme-pine .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-pine .export-dropdown:disabled {
  background-color: var(--pine-deselected);
  color: var(--pine-deselected-foreground);
}

#export-container.has-export-controls.theme-sky {
  background: var(--sky-tool);
  color: #393939;
  box-shadow: 0 4px 7px 0 var(--sky-drop-shadow);
}

#export-container.has-export-controls.theme-sky .export-dropdown {
  background-color: var(--sky-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-sky .export-dropdown:hover,
#export-container.has-export-controls.theme-sky .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-sky .export-dropdown:disabled {
  background-color: var(--sky-deselected);
  color: var(--sky-deselected-foreground);
}

#export-container.has-export-controls.theme-linen {
  background: var(--linen-tool);
  color: #393939;
  box-shadow: 0 4px 7px 0 var(--linen-drop-shadow);
}

#export-container.has-export-controls.theme-linen .export-dropdown {
  background-color: var(--linen-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-linen .export-dropdown:hover,
#export-container.has-export-controls.theme-linen .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-linen .export-dropdown:disabled {
  background-color: var(--linen-deselected);
  color: var(--linen-deselected-foreground);
}

#export-container.has-export-controls.theme-cotton {
  background: var(--cotton-tool);
  color: #393939;
  box-shadow: 0 4px 7px 0 var(--cotton-drop-shadow);
}

#export-container.has-export-controls.theme-cotton .export-dropdown {
  background-color: var(--cotton-hover);
  color: #000000;
}

#export-container.has-export-controls.theme-cotton .export-dropdown:hover,
#export-container.has-export-controls.theme-cotton .export-dropdown:focus {
  background-color: #ffffff;
  color: #000000;
}

#export-container.has-export-controls.theme-cotton .export-dropdown:disabled {
  background-color: var(--cotton-deselected);
  color: var(--cotton-deselected-foreground);
}