body.input-cupertino {
  --input-shadow: none;
  --input-shadow-hover: none;

  --interactive-hover: var(--interactive-normal);

  &.theme-light:not(.is-mobile) {
    --interactive-normal: var(--color-base-25);
    --background-modifier-form-field: var(--color-base-00);
  }
  &.theme-light.is-mobile {
    --interactive-normal: var(--background-primary);
  }

  --input-radius: var(--radius-s);
  --button-radius: var(--input-radius);

  --slider-thumb-border-width: 0;
  --slider-thumb-height: 18px;
  --slider-thumb-width: 28px;
  --slider-thumb-radius: var(--toggle-thumb-radius);
  --slider-track-height: 6px;
  --slider-track-background: var(--background-modifier-border-hover);

  --toggle-border-width: 1.5px;
  --toggle-s-border-width: var(--toggle-border-width);
  --toggle-s-thumb-height: var(--toggle-thumb-height);
  --toggle-s-thumb-width: var(--toggle-thumb-width);
  --toggle-s-width: var(--toggle-width);
  --toggle-thumb-height: 13px;
  --toggle-thumb-width: 21px;
  --toggle-width: 36px;

  &:not(.is-mobile) {
    --input-height: 24px;
  }

  &.is-mobile {
    --slider-thumb-height: 25px;
    --slider-thumb-y: -10px;
    --slider-thumb-width: 38px;

    --toggle-border-width: 2px;
    --toggle-thumb-height: 25px;
    --toggle-thumb-width: 38px;
    --toggle-width: 68px;

    --input-padding: 0 var(--side-padding);
    --dropdown-padding: 0 32px 0 var(--side-padding);

    --input-radius: var(--radius-l);
  }

  // Button
  button:not(.clickable-icon, .ant-switch, .workspace-leaf-content:not([data-type="markdown"]) button) {
    padding: 4px 12px;
  }
  &.is-phone button:not(.clickable-icon, .ant-switch, .workspace-leaf-content:not([data-type="markdown"]) button) {
    padding: 0 var(--side-padding);
  }
  &.is-tablet button:not(.clickable-icon, .ant-switch, .workspace-leaf-content:not([data-type="markdown"]) button) {
    padding: 4px var(--side-padding);
  }

  // Slider
  input[type="range"]::-webkit-slider-thumb {
    transition: var(--anim-duration-moderate);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.075), 0 1px 16px rgba(0, 0, 0, 0.05);

    &:active {
      scale: 1.5;
      backdrop-filter: var(--blur-s, brightness(1.025));
      box-shadow: inset 1px 1px 2px -2px rgba(var(--mono-rgb-100), 1), inset -1px -1px 2px -2px rgba(var(--mono-rgb-100), 1), var(--shadow-xs);
      background-color: transparent;
    }
  }

  // Toggle
  .checkbox-container {
    &,
    &::after {
      transition: var(--anim-duration-moderate);
    }

    &:active:after {
      transform-origin: center;
      scale: 1.5;
      backdrop-filter: var(--blur-s, brightness(1.025));
      box-shadow: inset 1px 1px 2px -2px rgba(var(--mono-rgb-100), 1), inset -1px -1px 2px -2px rgba(var(--mono-rgb-100), 1), var(--shadow-xs);
      background-color: transparent;
    }

    &.is-enabled:active:after {
      transform-origin: center right;
    }
  }

  // Dropdown
  select:focus,
  .combobox-button:focus,
  .dropdown:focus {
    box-shadow: none;
  }

  // Search bar fix
  .search-input-container {
    display: flex;
    align-items: center;
    overflow: visible;

    &:before {
      top: unset !important;
      inset-inline-start: 6px;
      height: var(--icon-s);
      width: var(--icon-s);
    }

    input {
      padding-inline-start: var(--input-height) !important;
    }
  }

  &.is-mobile .search-input-container::before {
    inset-inline-start: 12px;
  }
}
