@reference 'tailwindcss';

:host {
  --emr-overlay-scrollbar-thumb-bg: var(--color-neutral-300);
  --emr-overlay-scrollbar-thumb-hover-bg: var(--color-neutral-400);
  --emr-overlay-scrollbar-thumb-active-bg: var(--color-neutral-400);
  --emr-overlay-scrollbar-width: 8px;
  --emr-overlay-scrollbar-scroll-track-bg: transparent;

  display: block;
  position: relative;
  overflow: hidden;
  height: 100%;

  &.is-absolute {
    position: absolute;
    inset: 0;
  }

  .scrollable-content {
    height: 100%;
    overflow-y: scroll;
    width: 100%;
    padding-right: 0;
    box-sizing: border-box;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      background: transparent;
    }

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scroll-track {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--emr-overlay-scrollbar-width);
    background-color: var(--emr-overlay-scrollbar-scroll-track-bg);
    border-radius: theme(--radius-sm);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
  }

  .scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--emr-overlay-scrollbar-width);
    background-color: var(--emr-overlay-scrollbar-thumb-bg);
    border-radius: theme(--radius-sm);
    transition: background-color 0.2s ease-in-out;
  }

  .scroll-thumb:hover {
    background-color: var(--emr-overlay-scrollbar-thumb-hover-bg);
  }

  .scroll-thumb:active {
    background-color: var(--emr-overlay-scrollbar-thumb-active-bg);
  }

  &.scrollbar-visible {
    .scroll-track {
      opacity: 1;
    }
  }

  &.scrollbar-interactive {
  }
}

:host-context(html.dark) {
  --emr-overlay-scrollbar-thumb-bg: var(--color-neutral-700);
  --emr-overlay-scrollbar-thumb-hover-bg: var(--color-neutral-600);
  --emr-overlay-scrollbar-thumb-active-bg: var(--color-neutral-600);
}
