@import "tailwindcss";

@theme {
  --color-bg: #eeefe9;
  --color-coffee: #513d34;
  --color-dark: #222322;
  --color-frappe: #bba58e;
  --color-green: #959d90;
}

@layer base {
  :root {
    scrollbar-color: var(--color-coffee) var(--color-bg);
  }
  button {
    @apply cursor-pointer;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  svg {
    touch-action: none;
  }
  .handlers circle {
    r: 1%;
  }
  .grab {
    cursor: grab;
  }
  .grabbing {
    cursor: grabbing !important;
  }
}

@media screen and (max-width: 500px) {
  .handlers circle {
    r: 2%;
  }
}

@layer components {
  [role="switch"] {
    --padd: 0.25em;
    --track-width: 2.5em;
    box-sizing: content-box;

    appearance: none;
    display: inline-grid;
    background-color: var(--color-green);
    width: var(--track-width);
    height: calc(var(--track-width) / 2);
    border-radius: 9999px;
    padding: var(--padd);

    cursor: pointer;
    transition: background-color 300ms;
  }
  [role="switch"]::before {
    content: "";
    width: calc(var(--track-width) / 2);
    height: calc(var(--track-width) / 2);
    border-radius: 50%;

    background-color: #eceff1;
    box-shadow: 0 0 1px #444a;

    transition: transform 300ms, box-shadow 150ms ease-in-out;
  }
  [role="switch"]:checked {
    background-color: var(--color-frappe);
  }
  [role="switch"]:checked::before {
    transform: translateX(100%);
  }
  [role="switch"]:hover::before,
  [role="switch"]:focus-visible::before {
    box-shadow: 0 0 0 2px #cfd8dc90;
  }

  input[type="color"] {
    appearance: none;
    margin: 0;
    border-radius: 8px;
    cursor: pointer;
  }
  input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type="color"]::-webkit-color-swatch {
    border: none;
  }
  input[type="color"]::-moz-color-swatch {
    border: none;
  }
}
