@layer base {
  [data-theme="dark"] body {
    @apply bg-gray-800;
  }

  [data-theme="light"] body {
    @apply bg-white;
  }
}

@layer components {
  [type="text"],
  [type="email"],
  [type="url"],
  [type="password"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="week"],
  textarea,
  select {
    @apply rounded-md text-sm w-full block;
  }

  input[type="range"] {
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
  }

  input[type="range"]:focus {
    outline: none;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    margin-top: -4px;
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
  }

  input[type="range"]::-moz-range-track {
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  input[type="range"]::-moz-range-thumb {
    border: none;
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
  }

  input[type="range"]:focus::-webkit-slider-thumb,
  input[type="range"]:focus::-moz-range-thumb {
    @apply outline-1 outline-offset-2;
  }

  input[type="color"] {
    width: 46px;

    @apply border rounded-lg cursor-pointer;
  }

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

  input[type="color"]::-webkit-color-swatch {
    @apply border-0 rounded-lg;
  }

  select.compact {
    font-size: 0.8rem;
    line-height: 1.1rem;
    border-radius: 0.375rem;
    padding: 0.26rem 1.5rem 0.26rem 0.6rem;
    background-size: 1.2em 1.2em;
    background-position: right 0.4rem center;
  }

}
