/* 스크롤바 스타일 정의 */

/* 라이트모드 스크롤바 */
:root,
[data-bs-theme=light],
html[data-bs-theme=light],
body[data-bs-theme=light] {
  --bs-scrollbar-track-color: #fafafa;
  --bs-scrollbar-thumb-color: #eeeeee;
}

/* 다크모드 스크롤바 - 모든 가능한 다크모드 감지 */
[data-bs-theme=dark],
html[data-bs-theme=dark],
body[data-bs-theme=dark],
html.dark-style,
body.dark-style,
.dark-style,
html[data-style=dark],
body[data-style=dark],
[data-style=dark] {
  --bs-scrollbar-track-color: #333333 !important;
  --bs-scrollbar-thumb-color: #444444 !important;
}

/* Webkit 브라우저 (Chrome, Safari, Edge) 스크롤바 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bs-scrollbar-track-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--bs-scrollbar-thumb-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-scrollbar-thumb-color);
  opacity: 0.8;
}

::-webkit-scrollbar-corner {
  background: var(--bs-scrollbar-track-color);
}

/* Firefox 스크롤바 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-scrollbar-thumb-color) var(--bs-scrollbar-track-color);
}

/* 특정 요소에 대한 스크롤바 스타일 */
.modal-body::-webkit-scrollbar,
.layout-page::-webkit-scrollbar,
.content-wrapper::-webkit-scrollbar {
  width: 6px;
}

.modal-body::-webkit-scrollbar-track,
.layout-page::-webkit-scrollbar-track,
.content-wrapper::-webkit-scrollbar-track {
  background: var(--bs-scrollbar-track-color);
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb,
.layout-page::-webkit-scrollbar-thumb,
.content-wrapper::-webkit-scrollbar-thumb {
  background: var(--bs-scrollbar-thumb-color);
  border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.layout-page::-webkit-scrollbar-thumb:hover,
.content-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--bs-scrollbar-thumb-color);
  opacity: 0.8;
}