/**
 * global styles who apply to html elements
 * Concerns resets, basic typographical styles or default values.
 */

.light {
  color-scheme: light;
}
.dark {
  color-scheme: dark;
}

:focus-visible {
  @apply outline-yellow-4 rounded-sm outline-2 outline-offset-0;
}

[data-radio="legend"]:has(+ * :checked) {
  @apply outline-yellow-4 outline-2 -outline-offset-1;
}

textarea[readonly],
[aria-readonly="true"] {
  @apply bg-gray-1;
}
:is(input, textarea)[readonly] {
  @apply text-gray-6;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

input[type="range"] {
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  border: 0;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
input[type="range"]::-moz-range-thumb {
  appearance: none;
  border: 0;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
input[type="range"]::-ms-thumb {
  appearance: none;
  border: 0;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

mark {
  @apply bg-yellow-1 text-gray-8;
}

abbr {
  @apply cursor-help underline decoration-dashed;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

[data-color="yellow"] {
  /**
   * for readability 1 and 2 are gray
   */
  --color-custom-0: var(--color-gray-0);
  --color-custom-1: var(--color-gray-1);
  --color-custom-2: var(--color-gray-2);
  --color-custom-3: var(--color-yellow-3);
  --color-custom-4: var(--color-yellow-4);
  --color-custom-5: var(--color-yellow-5);
  --color-custom-text: var(--color-yellow-text);
  --color-custom-border: var(--color-gray-3);
}
[data-color="yellow-alpha"] {
  /**
   * for readability 1 and 2 are gray
   */
  --color-custom-0: color-mix(in oklab, var(--color-gray-8) 5%, transparent);
  --color-custom-1: color-mix(in oklab, var(--color-gray-8) 10%, transparent);
  --color-custom-2: color-mix(in oklab, var(--color-gray-8) 15%, transparent);
  --color-custom-3: color-mix(in oklab, var(--color-yellow-3) 65%, transparent);
  --color-custom-4: color-mix(in oklab, var(--color-yellow-4) 75%, transparent);
  --color-custom-5: color-mix(in oklab, var(--color-yellow-5) 85%, transparent);

  /* --color-custom-3: var(--color-yellow-3);
  --color-custom-4: var(--color-yellow-4);
  --color-custom-5: var(--color-yellow-5); */
  --color-custom-text: var(--color-yellow-text);
  --color-custom-border: var(--color-gray-3);
}
[data-color="gray"] {
  --color-custom-0: var(--color-gray-0);
  --color-custom-1: var(--color-gray-1);
  --color-custom-2: var(--color-gray-2);
  --color-custom-3: var(--color-gray-3);
  --color-custom-4: var(--color-gray-4);
  --color-custom-5: var(--color-gray-5);
  --color-custom-text: var(--color-gray-text);
  --color-custom-border: var(--color-gray-3);
}
[data-color="gray-alpha"] {
  --color-custom-0: color-mix(in oklab, var(--color-gray-8) 5%, transparent);
  --color-custom-1: color-mix(in oklab, var(--color-gray-8) 10%, transparent);
  --color-custom-2: color-mix(in oklab, var(--color-gray-8) 15%, transparent);
  --color-custom-3: color-mix(in oklab, var(--color-gray-8) 20%, transparent);
  --color-custom-4: color-mix(in oklab, var(--color-gray-8) 25%, transparent);
  --color-custom-5: color-mix(in oklab, var(--color-gray-8) 30%, transparent);
  --color-custom-text: var(--color-gray-text);
  --color-custom-border: var(--color-gray-3);
}
[data-color="red"] {
  --color-custom-0: var(--color-gray-0);
  --color-custom-1: var(--color-red-1);
  --color-custom-2: var(--color-red-2);
  --color-custom-3: var(--color-red-3);
  --color-custom-4: var(--color-red-4);
  --color-custom-5: var(--color-red-5);
  --color-custom-text: var(--color-red-text);
  --color-custom-border: var(--color-red-3);
}
[data-color="orange"] {
  --color-custom-0: var(--color-gray-0);
  --color-custom-1: var(--color-orange-1);
  --color-custom-2: var(--color-orange-2);
  --color-custom-3: var(--color-orange-3);
  --color-custom-4: var(--color-orange-4);
  --color-custom-5: var(--color-orange-5);
  --color-custom-text: var(--color-orange-text);
  --color-custom-border: var(--color-orange-3);
}
[data-color="green"] {
  --color-custom-0: var(--color-gray-0);
  --color-custom-1: var(--color-green-1);
  --color-custom-2: var(--color-green-2);
  --color-custom-3: var(--color-green-3);
  --color-custom-4: var(--color-green-4);
  --color-custom-5: var(--color-green-5);
  --color-custom-text: var(--color-green-text);
  --color-custom-border: var(--color-green-3);
}
[data-color="blue"] {
  --color-custom-0: var(--color-gray-0);
  --color-custom-1: var(--color-blue-1);
  --color-custom-2: var(--color-blue-2);
  --color-custom-3: var(--color-blue-3);
  --color-custom-4: var(--color-blue-4);
  --color-custom-5: var(--color-blue-5);
  --color-custom-text: var(--color-blue-text);
  --color-custom-border: var(--color-blue-3);
}