body.input-tactile {
  &.theme-light {
    --input-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-hover), inset 0 -1px 2px rgba(0, 0, 0, 0.05), inset 0 0 6px 2px white, inset 0 -16px 32px -32px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.035);
    --input-shadow-hover: 0 0 0 var(--input-border-width) var(--background-modifier-border), inset 0 0 6px 2px white, inset 0 16px 32px -32px rgba(0, 0, 0, 0.5);

    input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="number"]) {
      box-shadow: inset 0 8px 16px -8px rgba(0, 0, 0, 0.15);
    }
  }
  &.theme-dark {
    --input-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border), inset 0 0 4px -2px rgba(0, 0, 0, 0.35), inset 0 -2px 8px rgba(255, 255, 255, 0.15), inset 0 -8px 8px 4px var(--interactive-normal), inset 0 2px 16px -2px rgba(255, 255, 255, 0.15), inset 0 48px 16px -32px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.25);
    --input-shadow-hover: 0 0 0 var(--input-border-width) var(--background-modifier-border), inset 0 2px 4px rgba(255, 255, 255, 0.15), inset 0 4px 16px var(--interactive-normal), inset 0 -8px 16px rgba(255, 255, 255, 0.1), inset 0 -32px 16px -32px rgba(255, 255, 255, 0.1);

    &:not(.accented-interface) button.mod-cta {
      --input-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border-hover), inset 0 -1px 2px rgba(0, 0, 0, 0.1), inset 0 -2px 6px rgba(255, 255, 255, 0.75), inset 0 -24px 24px -16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.035);
      --input-shadow-hover: 0 0 0 var(--input-border-width) var(--background-modifier-border), inset 0 2px 4px 2px rgba(255, 255, 255, 0.5), inset 0 8px 8px rgba(0, 0, 0, 0.15);
    }

    input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="number"]) {
      box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 -1px 2px -1px white, inset 0 -8px 16px rgba(255, 255, 255, 0.05);
    }
  }

  button.mod-cta {
    --input-shadow: 0 0 0 var(--input-border-width) var(--background-modifier-border), inset 0 0 4px -2px white, inset 0 -2px 8px rgba(255, 255, 255, 0.5), inset 0 -8px 8px 4px var(--interactive-accent), inset 0 2px 16px -2px rgba(255, 255, 255, 0.25), inset 0 48px 16px -32px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.035);
    --input-shadow-hover: 0 0 0 var(--input-border-width) var(--background-modifier-border), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 4px 16px var(--interactive-accent), inset 0 -8px 16px rgba(255, 255, 255, 0.25), inset 0 -32px 16px -32px rgba(255, 255, 255, 0.25);
  }

  input[type="range"]::-webkit-slider-thumb,
  .checkbox-container:after {
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.05), inset 0 0 6px 2px #fff, inset 0 -8px 16px -8px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .checkbox-container {
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 -1px 2px -1px white;
  }

  button,
  select,
  .dropdown {
    transition: var(--anim-duration-fast) ease;
  }
}
