@layer base {
  html {
    font-size: 14px;
    background-color: var(--gray-50);
    color: var(--gray-800);
    height: 100%;
  }

  body {
    overflow: hidden;
    height: 100%;
    -webkit-font-smoothing: antialiased;
  }

  * {
    -webkit-user-drag: none;
  }

  *:focus-visible {
    outline: 1px solid var(--gray-800);
    border-radius: 4px;
  }

  svg {
    fill: currentColor;
  }

  svg path:focus {
    outline: none;
  }

  p,
  span,
  a,
  td,
  th,
  img,
  label,
  select,
  button,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  svg,
  path,
  ul,
  li,
  *[aria-hidden='true'] {
    user-select: none;
  }

  code {
    background: var(--color-gray-300);
    color: var(--color-gray-900);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-4);
  }

  /*
  * Scrollbar
  */
  ::-webkit-scrollbar {
    background-color: var(--gray-50);
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: var(--gray-200);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-400);
  }

  /*
  * Color inputs
  */
  input[type='color'] {
    -webkit-appearance: none;
    border: 2px solid var(--gray-900);
    cursor: pointer;
  }

  input[type='color']::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  input[type='color']::-webkit-color-swatch {
    border: none;
    padding: 0;
  }

  /*
  * Select inputs
  */
  select {
    background-image: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%233d3d3d' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-position: calc(100% - 12px);
    background-repeat: no-repeat;
    padding-right: 2rem !important;
  }

  html.dark select {
    background-image: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23b8b8b8' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
  }

  /*
  * Search inputs
  * Customize the cross icon to clear inputs of type search, notes:
  * - CSS vars don't work inside the background-image.
  * - Hex colors must be UTF-8 encoded.
  */
  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;
    height: 20px;
    width: 20px;
    transition: all;
    transition-duration: 0.3s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3b3b3'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  }

  input[type='search']::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231c1917'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  }

  html.dark input[type='search']::-webkit-search-cancel-button {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c5c5c'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  }

  html.dark input[type='search']::-webkit-search-cancel-button:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23efefef'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  }

  /*
  * Progress input
  */
  progress::-webkit-progress-bar {
    background-color: var(--gray-300);
    border-radius: 6px;
  }
  progress::-webkit-progress-value {
    border-radius: 6px;
    background-color: var(--blue-700);
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
}
