body.layout-cupertino.input-fluent:not(.is-mobile) {
  --radius-s: calc(5px * var(--radius-modifier));
  --radius-m: calc(5px * var(--radius-modifier));
  --radius-l: calc(10px * var(--radius-modifier));
  --radius-xl: calc(10px * var(--radius-modifier));
  --tab-radius: var(--radius-m);
  --clickable-icon-radius: var(--radius-m);

  --prompt-input-height: 64px;

  --shadow-xs: none;

  --icon-color: var(--color-base-90);
  --text-normal: var(--color-base-90);
  --nav-item-color: var(--color-base-100);

  * {
    -electron-corner-smoothing: none;
  }

  &.theme-light {
    --color-red-rgb: 209, 52, 56;
    --color-red: #d13438;
    --color-orange-rgb: 255, 140, 0;
    --color-orange: #ff8c00;
    --color-yellow-rgb: 253, 227, 0;
    --color-yellow: #fde300;
    --color-green-rgb: 19, 161, 14;
    --color-green: #13a10e;
    --color-cyan-rgb: 0, 183, 195;
    --color-cyan: #00b7c3;
    --color-blue-rgb: 0, 120, 212;
    --color-blue: #0078d4;
    --color-purple-rgb: 113, 96, 232;
    --color-purple: #7160e8;
    --color-pink-rgb: 228, 59, 166;
    --color-pink: #e43ba6;

    --modal-background: rgb(from var(--color-base-00) r g b / 90%);

    --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07);
    --shadow-l: 0px 32px 64px 0px rgba(0, 0, 0, 0.19), 0px 2px 21px 0px rgba(0, 0, 0, 0.15);
  }
  &.theme-dark {
    --color-red-rgb: 227, 125, 128;
    --color-red: #e37d80;
    --color-orange-rgb: 255, 186, 102;
    --color-orange: #ffba66;
    --color-yellow-rgb: 254, 238, 102;
    --color-yellow: #feee66;
    --color-green-rgb: 94, 199, 90;
    --color-green: #5ec75a;
    --color-cyan-rgb: 88, 211, 219;
    --color-cyan: #58d3db;
    --color-blue-rgb: 92, 170, 229;
    --color-blue: #5caae5;
    --color-purple-rgb: 167, 156, 241;
    --color-purple: #a79cf1;
    --color-pink-rgb: 239, 133, 200;
    --color-pink: #ef85c8;

    --modal-background: rgb(from var(--color-base-25) r g b / 75%);

    --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07);
    --shadow-l: 0px 32px 64px 0px rgba(0, 0, 0, 0.37), 0px 2px 21px 0px rgba(0, 0, 0, 0.37);
  }

  .clickable-icon.is-active {
    color: var(--icon-color-focused);
    background-color: var(--background-primary);
  }
  .clickable-icon:not([aria-disabled="true"]):hover,
  .clickable-icon.has-active-menu,
  .modal-close-button:hover {
    background-color: var(--background-modifier-hover);
  }

  // Editor panel
  .workspace-split.mod-root .workspace-tab-container {
    box-shadow: none;
  }

  // Side panels
  @keyframes workspaceLeafInFluent {
    from {
      transform: translateY(16px);
      opacity: 0;
    }
  }

  .mod-sidedock .workspace-leaf {
    animation: workspaceLeafInFluent var(--anim-duration-moderate);
  }

  &:not(.compact-actions-off) {
    .mod-sidedock .workspace-leaf-content > .nav-header,
    .mod-sidedock .workspace-leaf-content > .view-content > .nav-header {
      .nav-buttons-container {
        padding: 0;
        width: 100%;

        .nav-action-button {
          flex: 1;
          padding: 12px;
        }
        .nav-action-button.is-active {
          background-color: var(--interactive-normal);
          color: var(--icon-color);
          box-shadow: inset 0 0 0 1px var(--background-modifier-hover);

          &::after {
            position: absolute;
            bottom: 0;
            border-radius: var(--button-radius);
            background-color: var(--interactive-accent);
            width: 24px;
            height: 3px;
            content: "";
          }
        }
      }
    }
  }

  // File explorer
  &.nav-item-subtle .tree-item-self.is-active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    border-radius: var(--button-radius);
    background-color: var(--interactive-accent);
    width: 4px;
    content: "";
  }

  .menu,
  .suggestion-container,
  .popover,
  .cm-tooltip,
  .prompt,
  .modal,
  .notice {
    backdrop-filter: blur(8px);
  }

  .modal-bg {
    background-color: black;
    opacity: 0.3 !important;
  }

  // Menu
  .menu,
  .suggestion-container {
    animation: none;
    border-radius: var(--radius-l);
    border: var(--border-width) solid var(--background-modifier-border);

    .menu-scroll {
      padding: 5px;
    }

    .menu-separator {
      margin: 5px -5px;
    }

    .menu-item,
    .suggestion-item {
      border-radius: var(--radius-m);
      padding: 8px;
    }

    .menu-item-icon .svg-icon {
      --icon-size: var(--icon-s);
    }
  }

  // Prompt
  .prompt {
    animation: none;

    .prompt-results {
      position: relative;
    }
    .prompt-results .suggestion-item {
      position: relative;
    }
    .prompt-results .suggestion-item.is-selected::after {
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 0;
      border-radius: var(--button-radius);
      background-color: var(--interactive-accent);
      width: 4px;
      content: "";
    }
  }

  // Modal
  .modal {
    transition: none;
  }

  .modal:not(.mod-sidebar-layout) {
    padding: 0;
    min-width: 480px;

    .modal-title {
      padding: 24px 24px 4px;
      font-size: var(--font-ui-large);
    }

    .modal-content {
      padding: 4px 24px 16px;
    }

    .modal-button-container {
      margin: 0;
      border-top: var(--border-width) solid var(--background-modifier-border);
      background-color: var(--background-modifier-border);
      padding: 24px;

      button {
        border-radius: var(--button-radius);
      }
    }

    .modal-content > .modal-button-container {
      margin: 0 -24px -16px;
    }
  }

  // Settings
  .modal.mod-sidebar-layout {
    background-color: var(--modal-background);

    .vertical-tab-content {
      animation: workspaceLeafInFluent var(--anim-duration-moderate);
    }

    .setting-item {
      padding-block: calc(16px * var(--density-modifier));
    }
    .setting-item:not(.setting-item-heading) {
      background: var(--background-primary);
      border: var(--border-width) solid var(--background-modifier-hover);
      border-radius: var(--radius-m);
      margin-top: 4px;

      &::after {
        content: none;
      }
    }

    .vertical-tab-nav-item {
      padding: calc(8px * var(--density-modifier)) var(--side-padding);
    }
  }
  &.nav-item-subtle .modal.mod-sidebar-layout .vertical-tab-nav-item {
    position: relative;

    &.is-active::before {
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 0;
      border-radius: var(--button-radius);
      background-color: var(--interactive-accent);
      width: 4px;
      content: "";
    }
  }
}
