:root {
  scrollbar-width: thin;
  scrollbar-color: var(--ls-scrollbar-foreground-color)
    var(--ls-scrollbar-background-color);

  --ls-z-index-level-0: 0;
  --ls-z-index-level-1: 9;
  --ls-z-index-level-2: 99;
  --ls-z-index-level-3: 999;
  --ls-z-index-level-4: 9999;
  --ls-z-index-level-5: 99999;

  --ls-right-sidebar-width: 40%;
}

html {
  ::-webkit-scrollbar-thumb {
    background-color: var(--ls-scrollbar-foreground-color);
  }

  ::-webkit-scrollbar {
    background-color: var(--ls-scrollbar-background-color);
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: var(--ls-scrollbar-thumb-hover-color);
  }

  ::-webkit-scrollbar {
    width: var(--ls-scrollbar-width);
    height: 8px;
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

@media (prefers-color-scheme: dark) {
  .preboot-loading {
    color: lightgray;
  }
}

.form-checkbox, .form-radio {
  color: var(--ls-page-checkbox-color, #6093a0);
  background-color: var(--ls-page-checkbox-color, #6093a0);
  border-color: var(--ls-page-checkbox-border-color, #6093a0);
  border: none;
  position: relative;
}

.form-checkbox:hover {
  transform: scale(1.1);
}

html[data-theme='dark'] {
  background-color: var(--ls-primary-background-color);

  input.form-input {
    background: none;
  }
}

html[data-theme='light'] {
  .form-checkbox {
    &:focus {
      border-color: var(--ls-page-checkbox-border-color);
    }
  }

  .cp__header {
    a {
      color: var(--ls-primary-text-color);
    }
  }

  a.right-sidebar-button {
    color: var(--ls-primary-text-color);
  }

  a.right-sidebar-button:hover {
    color: var(--ls-link-text-hover-color);
  }
}

.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */

  &::-webkit-scrollbar {
    display: none;
  }
}

html.locked-scroll {
  overflow: hidden !important;
}

html.is-resizing-buf {
  #right-sidebar {
    transition: none;
  }
}