/* SPDX-License-Identifier: MIT */
/* Copyright (C) 2026 Abhishek Sengar */

:root {
  --control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --control-edge: rgba(15, 23, 42, 0.14);
  --control-raised: var(--control-highlight), 0 1px 0 var(--control-edge), 0 2px 0 rgba(15, 23, 42, 0.06), 0 3px 6px -3px rgba(15, 23, 42, 0.25);
  --control-raised-hover: var(--control-highlight), 0 1px 0 var(--control-edge), 0 3px 0 rgba(15, 23, 42, 0.07), 0 6px 10px -4px rgba(15, 23, 42, 0.28);
  --control-pressed: inset 0 1px 2px rgba(15, 23, 42, 0.16), inset 0 0 0 1px rgba(15, 23, 42, 0.03);
  --control-sunken: inset 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.9);
  --control-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  --key-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  --key-raised: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -2px 0 rgba(0, 0, 0, 0.16), 0 2px 0 rgba(0, 0, 0, 0.24), 0 6px 12px -6px rgba(0, 0, 0, 0.45);
  --key-pressed: inset 0 2px 3px rgba(0, 0, 0, 0.28), 0 0 0 rgba(0, 0, 0, 0);
  --control-motion: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
  --slider-track-height: 6px;
  --slider-thumb-size: 18px;
}

button.border:not(.border-transparent, .border-2, .border-0, .bg-transparent) {
  background-image: var(--control-gloss);
  box-shadow: var(--control-raised);
  transition: var(--control-motion);
}

button.border:not(.border-transparent, .border-2, .border-0, .bg-transparent):hover {
  transform: translateY(-1px);
  box-shadow: var(--control-raised-hover);
}

button.border:not(.border-transparent, .border-2, .border-0, .bg-transparent):active {
  transform: translateY(1px);
  box-shadow: var(--control-pressed);
}

button.border:is(.border-indigo-400, .border-indigo-500, .border-indigo-600, .border-brand-400, .border-brand-500, .border-amber-300, .border-amber-400) {
  background-image: none;
  box-shadow: var(--control-pressed), 0 0 0 3px rgb(var(--brand-500-rgb) / 0.12);
  transform: none;
}

button.text-white:is(.bg-indigo-500, .bg-indigo-600, .bg-violet-600, .bg-brand-600, .bg-emerald-600, .bg-emerald-500, .bg-slate-800, .bg-slate-900, .bg-rose-600, .bg-amber-500):not(.border-2) {
  background-image: var(--key-gloss);
  box-shadow: var(--key-raised);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  transition: var(--control-motion);
}

button.text-white:is(.bg-indigo-500, .bg-indigo-600, .bg-violet-600, .bg-brand-600, .bg-emerald-600, .bg-emerald-500, .bg-slate-800, .bg-slate-900, .bg-rose-600, .bg-amber-500):not(.border-2):hover {
  transform: translateY(-1px);
}

button.text-white:is(.bg-indigo-500, .bg-indigo-600, .bg-violet-600, .bg-brand-600, .bg-emerald-600, .bg-emerald-500, .bg-slate-800, .bg-slate-900, .bg-rose-600, .bg-amber-500):not(.border-2):active {
  transform: translateY(2px);
  box-shadow: var(--key-pressed);
}

.bg-slate-100.rounded-lg:has(> button) {
  box-shadow: var(--control-sunken);
}

.bg-slate-100.rounded-lg:has(> button) > button {
  transition: var(--control-motion);
}

.bg-slate-100.rounded-lg:has(> button) > button.bg-white {
  background-image: var(--control-gloss);
  box-shadow: var(--control-raised);
}

.bg-slate-100.rounded-lg:has(> button) > button.text-white {
  box-shadow: var(--key-raised);
}

button.bg-slate-100:not(.border) {
  background-image: var(--control-gloss);
  box-shadow: inset 0 -2px 0 rgba(15, 23, 42, 0.08), 0 1px 0 rgba(15, 23, 42, 0.06);
  transition: var(--control-motion);
}

button.bg-slate-100:not(.border):active {
  transform: translateY(1px);
  box-shadow: var(--control-pressed);
}

:is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="color"]), select, textarea).border:not(.bg-transparent) {
  box-shadow: var(--control-sunken);
  transition: var(--control-motion);
}

:is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="color"]), select, textarea).border:not(.bg-transparent):focus {
  border-color: var(--brand-400);
  box-shadow: var(--control-sunken), 0 0 0 3px rgb(var(--brand-500-rgb) / 0.18);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-600);
}

input[type="color"].border {
  box-shadow: var(--control-raised);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--slider-thumb-size);
  margin: 0;
  background: transparent;
  cursor: pointer;
}

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

input[type="range"]::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  border-radius: 999px;
  background: linear-gradient(180deg, #d5d9e2, #e8ebf1);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.25), 0 1px 0 rgba(255, 255, 255, 0.95);
}

input[type="range"]::-moz-range-track {
  height: var(--slider-track-height);
  border-radius: 999px;
  background: linear-gradient(180deg, #d5d9e2, #e8ebf1);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.25), 0 1px 0 rgba(255, 255, 255, 0.95);
}

input[type="range"]::-moz-range-progress {
  height: var(--slider-track-height);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  margin-top: calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75) 0 18%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(15, 23, 42, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px -1px rgba(15, 23, 42, 0.4);
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

input[type="range"]::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75) 0 18%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(15, 23, 42, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 3px 6px -1px rgba(15, 23, 42, 0.4);
  cursor: grab;
}

input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.08);
}

input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(0.96);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 6px rgb(var(--brand-500-rgb) / 0.18), inset 0 2px 2px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(15, 23, 42, 0.3);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgb(var(--brand-500-rgb) / 0.35), 0 3px 6px -1px rgba(15, 23, 42, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  button,
  input,
  select,
  textarea {
    transition: none !important;
  }
}