@import url("react-fontpicker-ts/dist/index.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input[type="color"] {
    @apply p-0 block h-9 w-full rounded-lg border-none bg-white/10 overflow-hidden text-sm/6 text-white focus:outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-orange-400;
  }

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

  input[type="color"]::-webkit-color-swatch {
    border: none;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

@font-face {
  font-family: "Virgil";
  src:
    url("/fonts/Virgil.woff2") format("woff2"),
    url("/fonts/Virgil.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.fontpicker {
  @apply block w-full py-1 rounded-lg bg-white/10 text-sm/6 border-none text-white focus:outline-none focus:outline-2 focus:-outline-offset-2 focus:outline-orange-400;

  .fontpicker__preview {
    filter: none;
    @apply ml-1 text-white text-sm;
  }

  .fontpicker__search {
    @apply rounded-lg outline-none;
  }

  .fontpicker__popout {
    @apply rounded-xl border border-white/5 bg-white/5 mt-1 p-1 empty:hidden backdrop-blur-xl;

    .fontpicker__option {
      @apply bg-transparent text-white text-sm/6 bg-blend-difference p-1 rounded-lg;
    }
  }

  .font-preview-virgil {
    &::before {
      @apply font-virgin text-white relative left-2 text-lg;
      content: "Virgil";
    }
  }
}

@media (min-width: 2540px) {
  html {
    font-size: 1.25rem;
  }
}

@media (min-width: 3240px) {
  html {
    font-size: 1.5rem;
  }
}

html {
  color-scheme: dark;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}
