/* =========================================================
   LIFTRIX Shared Scrollbars
   全画面共通スクロールバー
========================================================= */

:root{
  --liftrix-scrollbar-size: 8px;
  --liftrix-page-scrollbar-size: 10px;

  --liftrix-scrollbar-track: #04142F;
  --liftrix-scrollbar-track-soft: rgba(4,20,47,0.58);

  --liftrix-scrollbar-thumb: #1E4FD8;
  --liftrix-scrollbar-thumb-strong: #153A9A;
  --liftrix-scrollbar-thumb-hover: #245AE6;
}

/* =========================================================
   Page Scrollbar
   html / body のブラウザ全体スクロールバー
========================================================= */

html,
body{
  scrollbar-width: thin;
  scrollbar-color: var(--liftrix-scrollbar-thumb) var(--liftrix-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: var(--liftrix-page-scrollbar-size);
  height: var(--liftrix-page-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background: var(--liftrix-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      var(--liftrix-scrollbar-thumb) 0%,
      var(--liftrix-scrollbar-thumb-strong) 100%
    );
  border: 2px solid var(--liftrix-scrollbar-track);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      var(--liftrix-scrollbar-thumb-hover) 0%,
      var(--liftrix-scrollbar-thumb) 100%
    );
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background: var(--liftrix-scrollbar-track);
}

/* =========================================================
   App Internal Scrollbars
   アプリ内スクロール領域
========================================================= */

*{
  scrollbar-width: thin;
  scrollbar-color: var(--liftrix-scrollbar-thumb) var(--liftrix-scrollbar-track-soft);
}

*::-webkit-scrollbar{
  width: var(--liftrix-scrollbar-size);
  height: var(--liftrix-scrollbar-size);
}

*::-webkit-scrollbar-track{
  background: var(--liftrix-scrollbar-track-soft);
}

*::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      var(--liftrix-scrollbar-thumb) 0%,
      var(--liftrix-scrollbar-thumb-strong) 100%
    );
  border: 2px solid var(--liftrix-scrollbar-track-soft);
}

*::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      180deg,
      var(--liftrix-scrollbar-thumb-hover) 0%,
      var(--liftrix-scrollbar-thumb) 100%
    );
}

*::-webkit-scrollbar-corner{
  background: var(--liftrix-scrollbar-track);
}

/* =========================================================
   Main App Areas
========================================================= */

.appShell,
.appMain,
.pageContainer,
.sidebar,
.sidebar__inner,
.calendarScroller,
.calendarGridScroller,
.calendarBody,
.fc-scroller,
.clientListCompact,
.trainerListCompact,
.assignmentList,
.recordList,
.goalList,
.slotList,
.previewExerciseList,
.modalDialog,
.modalContent{
  scrollbar-width: thin;
  scrollbar-color: var(--liftrix-scrollbar-thumb) var(--liftrix-scrollbar-track-soft);
}