body.input-material {
  --input-border-width: 0px;
  --input-height: 40px;
  --input-radius: var(--radius-s);
  --toggle-border-width: 4px;
  --toggle-width: 52px;
  --toggle-thumb-height: 24px;
  --toggle-thumb-width: 24px;
  --slider-thumb-height: 44px;
  --slider-thumb-width: 4px;
  --slider-thumb-y: -19px;
  --slider-thumb-radius: 100vh;
  --slider-track-height: 16px;
  --interactive-hover: var(--color-base-25);
  --interactive-normal: var(--color-base-30);

  // Text input
  textarea,
  input:is([type="text"], [type="search"], [type="email"], [type="password"], [type="number"]),
  select,
  .combobox-button,
  .dropdown {
    transition: var(--anim-duration-fast);
    box-shadow: inset 0 0 var(--interactive-accent);
    border-bottom: var(--border-width) solid var(--background-modifier-border-focus);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;

    &:focus {
      box-shadow: inset 0 -2px var(--interactive-accent);
      border-color: transparent;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  // Slider
  input[type="range"]::-webkit-slider-thumb {
    outline: 6px solid var(--background-secondary);
    background-color: var(--interactive-accent);
  }
  input[type="range"]:active {
    --slider-thumb-y: -23px;
    --slider-thumb-height: 52px;
  }

  // Toggle
  .checkbox-container {
    &::after {
      transition: var(--anim-duration-fast);
    }
    &.is-enabled:active::after {
      opacity: 0.8;
      width: var(--toggle-thumb-height);
      left: unset;
    }
    &:not(.is-enabled) {
      --toggle-border-width: 8px;
      --toggle-thumb-color: var(--text-muted);
      --toggle-thumb-height: 16px;
      --toggle-thumb-width: 16px;
      box-shadow: inset 0 0 0 2px var(--text-muted);
    }
    &:not(.is-enabled):active::after {
      scale: 1.5;
      width: var(--toggle-thumb-height);
      margin-left: -4px;
    }
  }
}
