:root {
  color-scheme: light only;
}

.custom-gradient {
  background-color: var(--color-surface);
  background-image:
    radial-gradient(ellipse at 20% 80%, rgb(var(--palette-hq-blue-200)) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgb(var(--palette-hq-pink-100)) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 40%, rgb(var(--palette-hq-purple-100)) 0%, transparent 50%);
}

.custom-gradient-admin {
  background-color: var(--color-surface);
  background-image:
    radial-gradient(ellipse at 20% 80%, rgb(var(--palette-hq-pink-100)) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgb(var(--palette-hq-blue-200)) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 40%, rgb(var(--palette-hq-purple-100)) 0%, transparent 50%);
}

.float-labels {
  transition-property: top, font-size, line-height;
  transition-duration: 150ms;
  pointer-events: none;
  transition-timing-function: linear;
}

/* Slider Component Styles */
.slider-container {
  --slider-width: 50%;
  --slider-position: 0%;
}

.slider-background {
  width: var(--slider-width);
  left: var(--slider-position);
  transition: all 0.2s ease-in-out;
}

.slider-option {
  cursor: pointer;
  user-select: none;
}

.slider-option:hover {
  color: var(--color-ink) !important;
}

/* Dynamic slider positioning using CSS custom properties */
.slider-container[data-selected-index="0"] {
  --slider-position: 0%;
}

.slider-container[data-selected-index="1"] {
  --slider-position: 50%;
}

.slider-container[data-selected-index="2"] {
  --slider-position: 66.67%;
}

.slider-container[data-selected-index="3"] {
  --slider-position: 75%;
}

.slider-container[data-selected-index="4"] {
  --slider-position: 80%;
}

/* For 2 options (50% each) */
.slider-container[data-options-count="2"] {
  --slider-width: 50%;
}

/* For 3 options (33.33% each) */
.slider-container[data-options-count="3"] {
  --slider-width: 33.33%;
}

/* For 4 options (25% each) */
.slider-container[data-options-count="4"] {
  --slider-width: 25%;
}

/* For 5 options (20% each) */
.slider-container[data-options-count="5"] {
  --slider-width: 20%;
}