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

body.is-mobile.is-android:not(.material-off) {
  --font-text-theme: "Roboto", sans-serif;
  --font-interface-theme: "Google Sans", "Roboto", sans-serif;
  --h1-font: var(--font-interface-theme);
  --h2-font: var(--font-interface-theme);
  --h3-font: var(--font-interface-theme);
  --h4-font: var(--font-interface-theme);
  --h5-font: var(--font-interface-theme);
  --h6-font: var(--font-interface-theme);
  --border-width: 1px;
  --button-radius: 100vh;
  --radius-xl: 32px;
  --radius-l: 24px;
  --radius-m: 16px;
  --radius-s: 8px;
  --input-height: 48px;
  --input-radius: var(--radius-s);
  --input-font-weight: var(--font-normal);
  --toggle-border-width: 2px;
  --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;
  --tab-switcher-preview-background-shadow: none;
  --tab-switcher-preview-radius: var(--radius-m);
  --nav-item-background-active: var(--interactive-accent-active);
  --nav-item-background-selected: var(--interactive-accent-active);
  --nav-item-color-active: var(--text-accent-active);
  --nav-item-padding: 16px 24px !important;
  --nav-item-weight-active: var(--font-bold);
  --blur-s: blur(8px);
  --blur-m: blur(16px);
  --blur-l: blur(32px);
  --shadow-xs: none;
  --shadow-s: rgba(0, 0, 0, 0.1) 0px 8px 30px !important;
  --shadow-l: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12) !important;
  --side-padding: 16px !important;

  &.theme-light {
    --interactive-normal: var(--background-secondary);
    --text-accent-active: hsl(calc(var(--accent-h) + 15), calc(var(--accent-s) * 0.93), calc(var(--accent-l) * 0.475));
    --interactive-accent-active: hsl(calc(var(--accent-h) - 9), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.375));
  }
  &.theme-dark {
    --interactive-normal: var(--background-secondary-alt);
    --text-accent-active: hsl(calc(var(--accent-h) - 9), calc(var(--accent-s) * 1.05), calc(var(--accent-l) * 1.375));
    --interactive-accent-active: hsl(calc(var(--accent-h) + 7), calc(var(--accent-s) * 0.78), calc(var(--accent-l) * 0.45));
  }

  &.is-phone {
    --view-header-height: var(--input-height);
  }

  /********** Components **********/

  button:not(.clickable-icon):not([class*="mod-"]),
  select,
  .dropdown {
    border: var(--border-width) solid var(--background-modifier-border);
    background-color: var(--interactive-normal);
  }

  textarea,
  input[type="text"],
  input[type="number"],
  input[type="search"] {
    transition: var(--anim-duration-fast);
    box-shadow: inset 0 0 var(--color-accent);
    border-bottom: var(--border-width) solid var(--background-modifier-border);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: var(--interactive-normal);

    &:focus {
      box-shadow: inset 0 -3px var(--color-accent);
      border-color: transparent;
    }
  }

  textarea,
  input[type="text"],
  input[type="number"],
  input[type="search"],
  select,
  .dropdown {
    padding-left: var(--side-padding);
  }

  input[type="range"] {
    transition: var(--anim-duration-fast);
  }
  input[type="range"]::-webkit-slider-thumb {
    outline: 6px solid var(--background-primary);
    box-shadow: none;
    background-color: var(--interactive-accent);
  }
  &.theme-dark input[type="range"]::-webkit-slider-thumb {
    outline-color: var(--background-secondary);
  }
  input[type="range"]:active,
  input[type="range"]:focus,
  input[type="range"]:focus-within,
  input[type="range"]:hover {
    --slider-thumb-y: -23px;
    --slider-thumb-height: 52px;
    --slider-track-height: 40px;
  }

  .checkbox-container {
    box-sizing: content-box;
    outline: none;
    border: 2px solid transparent;

    &::after {
      box-shadow: none;
    }
    &:not(.is-enabled) {
      border-color: var(--text-muted);
      &::after {
        background-color: var(--text-muted);
      }
    }
  }

  /********** Mode Switchcer **********/

  &.is-phone:not(.mod-toolbar-open) .mod-root .view-actions button:nth-last-child(2) {
    right: var(--side-padding);
    z-index: var(--layer-cover);
    border: none;
    width: var(--input-height);
    height: var(--input-height);
  }

  &.is-phone .mod-root .workspace-leaf-content[data-mode="source"] .view-header .view-actions button:nth-last-child(2) {
    background-color: var(--interactive-accent-active) !important;
    color: var(--text-accent-active) !important;
  }

  /********** Top Bar **********/

  .view-action.clickable-icon {
    background-color: var(--modal-background) !important;
  }

  /********** Bottom Bar **********/

  .mobile-navbar,
  .workspace-drawer .nav-header {
    padding: 8px var(--side-padding) max(var(--safe-area-inset-bottom), 16px);
  }

  .mobile-navbar-actions,
  .mobile-toolbar-options-list {
    background-color: var(--modal-background);
  }
  .workspace-drawer .nav-buttons-container {
    background-color: var(--background-primary);
  }

  /********** Menu **********/

  &.is-phone .menu {
    border-radius: var(--modal-radius) var(--modal-radius) 0 0;
    margin: 0;

    .menu-grabber {
      top: 6px;
      width: 32px;
      height: 4px;
    }
    .menu-separator {
      border-color: transparent;
    }

    .menu-scroll {
      gap: 2px;
      padding-top: 34px;
    }
    .menu-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .menu-item-title::after {
      content: none;
    }
    .menu-item:not(.is-label) {
      flex-direction: row !important;
      gap: 16px;
    }
    .menu-item:not(.is-label[data-section="title"]) {
      background-color: var(--interactive-normal);
    }
    .menu-item.tappable:not(:has(.mod-checked)) .menu-item-title {
      margin-left: 0 !important;
    }
    .menu-item {
      border: none !important;
      border-radius: var(--radius-l);
    }
    .menu-item + .menu-item,
    .menu-item:has(+ .menu-item) {
      border-radius: var(--radius-s);
    }
    .menu-separator + .menu-item,
    .menu-item:first-child:has(+ .menu-item) {
      border-top-right-radius: var(--radius-l);
      border-top-left-radius: var(--radius-l);
    }
    .menu-item:has(+ .menu-separator),
    .menu-item + .menu-item:last-child {
      border-bottom-right-radius: var(--radius-l);
      border-bottom-left-radius: var(--radius-l);
    }
    .menu-item-icon:empty {
      display: none;
    }
  }

  &.is-tablet .menu {
    border-radius: var(--radius-m);

    .menu-scroll {
      padding: 8px 0;
    }

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

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

  .workspace-drawer-header-icon,
  .modal-setting-back-button,
  .modal-close-button {
    background-color: var(--background-primary) !important;
  }

  .nav-files-container {
    padding: 0 var(--side-padding) 8px !important;

    > div {
      gap: 2px;
      margin-bottom: 96px;
      border-radius: 0;
      background-color: transparent;
    }
  }

  .nav-files-container .tree-item:not(:last-child)::before,
  .nav-files-container .tree-item-children::before {
    content: none;
  }

  .nav-files-container .tree-item-self {
    border-radius: 100vh !important;
    padding-inline-end: var(--side-padding);
  }

  .nav-folder:not(.is-collapsed) > .nav-folder-title {
    background-color: var(--nav-item-background-hover);
  }

  .workspace-drawer {
    .workspace-drawer-active-tab-header {
      margin: 0 var(--side-padding);
    }

    .view-content {
      padding: 0 var(--side-padding) 96px;
    }

    .view-content > div:not(.nav-header):not(:empty) {
      border-radius: var(--radius-m);
    }
  }

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

  &.theme-light {
    .modal.mod-sidebar-layout {
      .vertical-tab-nav-item,
      .setting-item:not(.setting-item-heading) {
        background-color: var(--background-primary);
      }
    }
  }

  &.theme-dark {
    .modal.mod-sidebar-layout {
      .vertical-tab-nav-item,
      .setting-item:not(.setting-item-heading) {
        background-color: var(--background-secondary);
      }
    }
  }
  .modal.mod-sidebar-layout {
    .vertical-tab-nav-item,
    textarea,
    input[type="text"],
    input[type="search"],
    input[type="number"],
    button,
    select,
    .dropdown {
      &:not(:last-child)::after {
        content: none;
      }
    }

    .vertical-tab-nav-item {
      transition: border-radius var(--anim-duration-fast);
      border: none;
      border-radius: var(--radius-s);
      min-height: 64px;
    }
    .vertical-tab-nav-item.is-active {
      border-radius: var(--radius-l);
      background-color: var(--nav-item-background-active);
      color: var(--nav-item-color-active);
      font-weight: var(--nav-item-weight-active);
    }
    .vertical-tab-nav-item-chevron {
      display: none;
    }

    .vertical-tab-header-group-items {
      gap: 2px;
      border-radius: var(--radius-l);
      background-color: transparent;
    }

    .vertical-tab-header-group-title,
    .setting-item-heading .setting-item-name {
      padding-left: 8px;
      color: var(--text-accent);
      font-weight: var(--font-bold);
      font-family: var(--font-text-theme);
      letter-spacing: 0.1px;
      text-transform: unset;
    }
    .setting-item:not(:last-child):not(.setting-item-heading) {
      margin-bottom: 2px;
    }

    .modal-header {
      padding: var(--safe-area-inset-top) 16px 0 !important;
    }

    .setting-item {
      border: none;
    }

    button:not(.clickable-icon) {
      padding: 24px;
      width: unset;
    }
  }

  &.is-phone .modal.mod-sidebar-layout {
    .modal-close-button {
      top: var(--safe-area-inset-top);
      inset-inline-end: var(--side-padding);
    }

    .setting-item:not(.setting-item-heading),
    .setting-item-control .mobile-option-setting-item {
      border-radius: var(--radius-l);
      padding: var(--side-padding);
    }
    .setting-item:not(.setting-item-heading):has(+ .setting-item:not(.setting-item-heading)) {
      margin-bottom: 2px;
      border: none;
      border-bottom-right-radius: var(--radius-s);
      border-bottom-left-radius: var(--radius-s);
    }
    .setting-item:not(.setting-item-heading) + .setting-item:not(.setting-item-heading) {
      border-top-right-radius: var(--radius-s);
      border-top-left-radius: var(--radius-s);
    }
  }

  &.is-tablet .modal.mod-sidebar-layout {
    .vertical-tab-header {
      border: none;
    }

    &:not(.mod-community-modal) {
      .setting-item:not(.setting-item-heading) {
        border-radius: var(--radius-s);
      }
      .setting-item-heading + .setting-item,
      *:not(.setting-item) + .setting-item:not(.setting-item-heading),
      .setting-item:first-child:not(.setting-item-heading) {
        border-top-right-radius: var(--radius-m) !important;
        border-top-left-radius: var(--radius-m) !important;
      }
      .setting-item:has(+ .setting-item-heading),
      .setting-item:has(+ *:not(.setting-item)):not(.setting-item-heading),
      .setting-item:last-child {
        border-bottom-right-radius: var(--radius-m) !important;
        border-bottom-left-radius: var(--radius-m) !important;
      }
    }
  }

  /********** Modal **********/

  .modal-container {
    align-items: center;
  }
  .modal:not(.mod-sidebar-layout) {
    margin: 0 8px;
    box-shadow: none;

    .modal-title {
      max-width: 100%;
      font-weight: var(--font-normal);
      font-size: var(--h1-size);
    }

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

    .modal-button-container {
      flex-direction: row;
      gap: 4px;
      margin-bottom: 0;
      padding: 0 24px 24px;
      justify-content: flex-end;

      button {
        margin: 0;
        background-color: transparent;
        padding: 0 var(--side-padding);
        color: var(--text-accent);
        font-weight: var(--font-bold);
        flex-grow: 0;
        flex: 0;
      }
    }
  }

  /********** Prompt **********/

  .prompt {
    .prompt-input,
    .prompt-input-container .search-input-clear-button {
      box-shadow: none !important;
      border: none !important;
      background-color: var(--background-primary) !important;
      border-radius: var(--clickable-icon-radius) !important;
    }

    .suggestion-item {
      border-radius: 100vh;
      padding: var(--nav-item-padding);
    }
  }

  /********** Tab Switcher **********/

  .mobile-tab-switcher-menubar {
    border: none;
    padding: 8px var(--side-padding) calc(var(--safe-area-inset-bottom) + 8px);
  }
}
