/**
@prop --ux-auto-hide: Set to false to disable the default auto-hide behavior
@prop --ux-max-height: Set the scrollpanel max height
 */
:host {
  --scrollbar-size: var(--ux-scrollbar-size, 24px);
  display: block;
  width: 100%;
  height: 100%;
  max-height: var(--ux-max-height, none);
  position: relative;
}

.content {
  position: absolute;
  inset: 0;
  overflow: auto;
  overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}
.content::-webkit-scrollbar {
  display: none;
}

.scrollbars {
  position: absolute;
  pointer-events: none;
  inset: 0;
  transition: opacity 0.5s ease;
}
.scrollbars.inactive {
  opacity: 0;
}
@container style(--ux-auto-hide: false) {
  .scrollbars {
    transition: none;
  }
  .scrollbars.inactive {
    opacity: 1;
    transition: none;
  }
}

@container style(--ux-auto-hide: false) {
  :host([scrollbars=horizontal]) .content {
    padding-bottom: var(--scrollbar-size);
  }
}

@container style(--ux-auto-hide: false) {
  :host([scrollbars=vertical]) .content {
    padding-right: var(--scrollbar-size);
  }
}

@container style(--ux-auto-hide: false) {
  :host([scrollbars=both]) .content {
    padding-right: var(--scrollbar-size);
    padding-bottom: var(--scrollbar-size);
  }
}