/* NOT FOR INDEPENDENT USE - Windows Mode is built upon the rest of Cupertino components. */

body.mod-windows:not(.windows-mode-off):not(.is-mobile) {
  --font-text-theme: "Segoe UI Variable", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-interface-theme: "Segoe UI Variable", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --input-height: 32px;
  --blur-s: blur(16px);
  --blur-m: blur(16px);
  --blur-l: blur(32px);
  --radius-l: 10px;
  --radius-m: 5px;
  --radius-s: 5px;
  --radius-xl: 10px;
  --radius-window: var(--radius-s);
  --clickable-icon-radius: var(--radius-s);
  --icon-xs-stroke-width: 1.5px;
  --icon-s-stroke-width: 1.5px;
  --icon-m-stroke-width: 1.5px;
  --icon-l-stroke-width: 1.5px;
  --icon-xl-stroke-width: 1.5px;
  --toggle-thumb-height: 12px;
  --toggle-thumb-width: 12px;
  --toggle-width: 40px;
  --toggle-border-width: 4px;
  --slider-thumb-border-width: 4px;
  --slider-thumb-width: 18px;
  --slider-track-background: var(--color-base-50);
  --slider-track-height: 4px;
  --ribbon-width: 64px;
  --side-padding: 16px;
  --shadow-xs: none;
  --frame-right-space: 144px;
  --divider-color: rgba(var(--mono-rgb-100), 0.05) !important;
  --workspace-background-translucent: rgb(from var(--background-primary) r g b / 90%);

  background-color: rgb(var(--mono-rgb-0));

  &.theme-light {
    --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) !important;
    --shadow-l: 0px 32px 64px 0px rgba(0, 0, 0, 0.19), 0px 2px 21px 0px rgba(0, 0, 0, 0.15) !important;
    --input-shadow: 0px 0px 0px 1px var(--background-modifier-border), 0 -0.5px 0 0 rgba(0, 0, 0, 0.25) inset !important;
    --interactive-normal: var(--background-primary);
    --modal-background: rgb(from var(--color-base-00) r g b / 90%) !important;
    --modal-border-color: rgba(0, 0, 0, 0.1);
    --slider-thumb-border-color: var(--color-base-00);
  }
  &.theme-dark {
    --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) !important;
    --shadow-l: 0px 32px 64px 0px rgba(0, 0, 0, 0.37), 0px 2px 21px 0px rgba(0, 0, 0, 0.37) !important;
    --input-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0 0 rgba(255, 255, 255, 0.1) inset !important;
    --interactive-normal: var(--color-base-35);
    --modal-background: rgb(from var(--color-base-25) r g b / 75%) !important;
    --modal-border-color: rgba(255, 255, 255, 0.1);
    --slider-thumb-border-color: var(--color-base-35);

    .mod-sidedock {
      --divider-color: rgba(0, 0, 0, 0.2) !important;
    }
  }

  &::before {
    filter: saturate(1.5);
  }
  &.theme-light::before {
    mix-blend-mode: hard-light;
  }

  &::after {
    position: fixed;
    opacity: 0.1;
    z-index: -1;
    mix-blend-mode: overlay;
    inset: 0;
    background-image: url(data:image/jpeg;base64,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);
    content: "";
  }

  &.is-hidden-frameless .titlebar .titlebar-button-container.mod-right .titlebar-button {
    height: var(--header-height);
  }

  /********** Components **********/
  button[class*="mod-"]:not(.view-action) {
    box-shadow: var(--input-shadow) !important;
    background-image: none !important;

    &::before {
      display: none;
    }
  }

  button:not(.clickable-icon),
  select,
  .dropdown {
    box-shadow: var(--input-shadow);
  }

  select,
  .dropdown {
    padding: 6px 32px 6px 16px;
  }

  input[type="text"],
  input[type="number"],
  input[type="search"] {
    box-shadow: 0 -0.5px 0 0 var(--color-base-50) inset;
    padding-left: var(--side-padding);

    &:active,
    &:focus,
    &:focus-visible {
      box-shadow: 0 -2px 0 0 var(--interactive-accent) inset;
      border-color: var(--background-modifier-border);
    }
  }

  input[type="range"]::-webkit-slider-thumb {
    transition: var(--anim-duration-fast);
    box-shadow: 0 0.5px 1px 1px rgba(0, 0, 0, 0.1);
    background-color: var(--interactive-accent);
  }

  input[type="range"]::-webkit-slider-thumb:hover,
  input[type="range"]::-webkit-slider-thumb:active {
    border: 3px solid var(--slider-thumb-border-color);
  }

  .checkbox-container {
    box-shadow: none;

    &:not(.is-enabled) {
      --toggle-thumb-color: var(--text-muted);
      outline: 1px solid var(--text-faint);
      background-color: var(--color-base-10);
    }

    &.is-enabled {
      --toggle-thumb-color: var(--text-on-accent);
      background: var(--interactive-accent);
    }
  }

  /********** Editor **********/

  .mod-root .workspace-tab-container {
    outline: var(--border-width) solid var(--background-modifier-hover);
    box-shadow: none !important;
  }

  /********** Sidebar **********/

  &.show-ribbon .mod-sidedock.is-sidedock-collapsed .workspace-tabs.mod-top-left-space {
    .workspace-tab-header-container {
      padding-left: 4px !important;
    }
    .workspace-tab-header-container-inner {
      margin-left: 0 !important;
    }
  }

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

    .workspace-tab-header-container {
      padding-left: 12px;
      padding-right: 12px;
    }

    .nav-header:hover .nav-action-button {
      padding: 8px !important;
      flex: 1;
    }

    .nav-buttons-container {
      width: 100%;
    }
  }

  .nav-buttons-container {
    gap: 0;
    padding: 0;
    border-radius: var(--radius-s);
    background-color: var(--background-modifier-hover);
    box-shadow: none;
  }

  .nav-action-button.is-active {
    box-shadow: 0 0 0 1px var(--background-modifier-hover) inset;

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

  .tree-item-self.is-active::after,
  .vertical-tab-nav-item.is-active::after {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    border-radius: var(--radius-l);
    background-color: var(--interactive-accent);
    width: 4px;
    content: "";
  }

  /********** Settings **********/

  &.theme-light .modal.mod-sidebar-layout .setting-item:not(.setting-item-heading) {
    border: var(--border-width) solid rgba(0, 0, 0, 0.05);
    background-color: rgba(255, 255, 255, 1);
  }
  &.theme-dark .modal.mod-sidebar-layout .setting-item:not(.setting-item-heading) {
    border: var(--border-width) solid rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.05);
  }

  .modal.mod-sidebar-layout {
    .vertical-tab-header {
      border: none;
      background-color: transparent;
    }

    .vertical-tab-header-group-title {
      padding: 8px var(--side-padding);
    }
    .vertical-tab-content {
      animation: fadeInUp var(--anim-duration-moderate);
      background-color: transparent !important;
    }
    .vertical-tab-nav-item {
      position: relative;
      padding: 8px var(--side-padding);

      &.is-active {
        --background-modifier-hover: unset;
        background-color: var(--background-modifier-hover);
        color: var(--color-base-100);
      }
    }

    .setting-item-heading {
      padding: 16px var(--side-padding) 12px;
    }
    .setting-item-heading .setting-item-name {
      font-size: var(--font-ui-large);
    }
    .setting-item:not(.setting-item-heading) {
      border-radius: var(--radius-m);
      padding: 16px 20px;
    }
    .setting-item:not(:last-child):not(.setting-item-heading) {
      margin-bottom: 4px;
    }
  }

  /********** Menu and Suggestions **********/
  .menu,
  .suggestion-container {
    border-radius: calc(var(--radius-m) + 6px);
    border: var(--border-width) solid var(--background-modifier-border);

    > div {
      padding: 6px;
    }

    .menu-separator {
      margin: 4px 0;
    }

    .menu-item,
    .suggestion-item {
      justify-content: flex-start;
      border-radius: var(--radius-m);
      padding: 8px;
      min-width: 200px;
    }
    .menu-item.selected:not(.is-label):not(.is-disabled),
    .suggestion-item.is-selected:not(.mod-group) {
      background-color: var(--background-modifier-hover);
      color: var(--color-base-100);

      .menu-item-icon,
      .suggestion-flair {
        color: var(--color-base-100);
      }
    }

    .search-suggest-info-text {
      color: var(--color-base-100);
    }

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

    .bases-toolbar-menu-item {
      border-radius: var(--radius-m) !important;
    }
  }

  /********** Modal **********/
  &.theme-dark .modal:not(.mod-sidebar-layout) .modal-button-container {
    background-color: var(--color-base-05);
    border-top-color: var(--color-base-00);
  }

  .modal {
    border: var(--border-width) solid var(--background-modifier-border);
  }

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

  .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-content,
    .mod-checkbox {
      font-size: var(--font-ui-medium);
    }

    .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;
    }

    &.mod-narrow .modal-content {
      padding: 4px 24px 88px;

      .modal-button-container {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }

  /********** Prompt **********/
  .prompt {
    background-color: var(--modal-background);
    border: var(--prompt-border-width) solid var(--prompt-border-color);
    animation: none;
  }

  .prompt-input-container {
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    border-bottom: var(--prompt-border-width) solid var(--background-modifier-border);
  }

  .prompt-input {
    padding: 32px 24px;
    font-size: unset;
    margin-left: 32px;
  }

  .prompt-results .suggestion-item {
    position: relative;
    padding: 12px;
  }

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