/* Custom scrollbars based on club colors */

/* Main scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-soft, #f2f2f2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    var(--primary, #2d74da) 0%,
    color-mix(in srgb, var(--primary, #2d74da) 85%, var(--secondary, #1a1a1a)) 100%
  );
  border-radius: 10px;
  border: 2px solid var(--bg-soft, #f2f2f2);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary, #2d74da) 110%, white) 0%,
    var(--primary, #2d74da) 100%
  );
  border-color: color-mix(in srgb, var(--primary, #2d74da) 20%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary, #2d74da) 30%, transparent);
}

::-webkit-scrollbar-thumb:active {
  background: var(--primary, #2d74da);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary, #2d74da) var(--bg-soft, #f2f2f2);
}

/* Dark mode adjustments */
.chakra-ui-dark ::-webkit-scrollbar-track {
  background: var(--bg-soft, #1a1f29);
}

.chakra-ui-dark ::-webkit-scrollbar-thumb {
  border-color: var(--bg-soft, #1a1f29);
}

.chakra-ui-dark * {
  scrollbar-color: var(--primary, #2d74da) var(--bg-soft, #1a1f29);
}

/* Thin scrollbars for specific contexts */
.thin-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  border-width: 1px;
}

/* Hide scrollbar but keep functionality (for carousels, sliders) */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Accent scrollbar variant */
.accent-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    var(--accent, #ffb703) 0%,
    color-mix(in srgb, var(--accent, #ffb703) 85%, var(--primary, #2d74da)) 100%
  );
}

.accent-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #ffb703);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #ffb703) 40%, transparent);
}