@use 'Foundation/scss/scrollbar-chains' as chains;

$padding-y: var(--wds-space-padding-vertical-x-tiny, 3px);
$padding-x: var(--wds-space-padding-horizontal-xx-tiny, 3px);
$interactive-area-offset: 4px;

@keyframes os-size-observer-appear-animation {
  from {
    cursor: auto;
  }
  to {
    cursor: none;
  }
}
:global(.os-size-observer),
:global(.os-size-observer-listener) {
  scroll-behavior: auto !important;
  direction: inherit;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
}

:global(.os-size-observer),
:global(.os-size-observer-listener),
:global(.os-size-observer-listener-item),
:global(.os-size-observer-listener-item-final) {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  top: 0;
}

:global(.os-size-observer) {
  z-index: -1;
  contain: strict;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: inherit;
  border: inherit;
  box-sizing: inherit;
  margin: -133px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale(0.1);
}

:global(.os-size-observer::before) {
  content: "";
  flex: none;
  box-sizing: inherit;
  padding: 10px;
  width: 10px;
  height: 10px;
}

:global(.os-size-observer-appear) {
  animation: os-size-observer-appear-animation 1ms forwards;
}

:global(.os-size-observer-listener) {
  box-sizing: border-box;
  position: relative;
  flex: auto;
  padding: inherit;
  border: inherit;
  margin: -133px;
  transform: scale(calc(1 / 0.1));
}

:global(.os-size-observer-listener.ltr) {
  margin-right: -266px;
  margin-left: 0;
}

:global(.os-size-observer-listener.rtl) {
  margin-left: -266px;
  margin-right: 0;
}

:global(.os-size-observer-listener):empty::before {
  content: "";
  width: 100%;
  height: 100%;
}

:global(.os-size-observer-listener):empty::before,
:global(.os-size-observer-listener) > :global(.os-size-observer-listener-item) {
  display: block;
  position: relative;
  padding: inherit;
  border: inherit;
  box-sizing: content-box;
  flex: auto;
}

:global(.os-size-observer-listener-scroll) {
  box-sizing: border-box;
  display: flex;
}

:global(.os-size-observer-listener-item) {
  right: 0;
  bottom: 0;
  overflow: hidden;
  direction: ltr;
  flex: none;
}

:global(.os-size-observer-listener-item-final) {
  transition: none;
}

:global(.os-trinsic-observer) {
  flex: none;
  box-sizing: border-box;
  position: relative;
  max-width: 0px;
  max-height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
  height: 0;
  top: calc(100% + 1px);
  contain: strict;
}

:global(.os-trinsic-observer):not(:empty) {
  height: calc(100% + 1px);
  top: -1px;
}

:global(.os-trinsic-observer):not(:empty) > :global(.os-size-observer) {
  width: 1000%;
  height: 1000%;
  min-height: 1px;
  min-width: 1px;
}

:global(.os-environment) {
  scroll-behavior: auto !important;
  position: fixed;
  opacity: 0;
  visibility: hidden;
  overflow: scroll;
  height: 200px;
  width: 200px;
  z-index: -1;
}
:global(.os-environment) > :global(div) {
  width: 200%;
  height: 200%;
  margin: 10px 0;
}
:global(.os-environment.os-environment-flexbox-glue) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: auto;
  width: auto;
  min-height: 200px;
  min-width: 200px;
}
:global(.os-environment.os-environment-flexbox-glue) :global(div) {
  flex: auto;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
}
:global(.os-environment.os-environment-flexbox-glue-max) {
  max-height: 200px;
}

:global(.os-environment.os-environment-flexbox-glue-max) :global(div) {
  overflow: visible;
}
:global(.os-environment.os-environment-flexbox-glue-max) :global(div::before) {
  content: "";
  display: block;
  height: 999px;
  width: 999px;
}
:root [data-overlayscrollbars-viewport] {
  -ms-overflow-style: scrollbar !important;
}

:root [data-overlayscrollbars-initialize],
:root [data-overlayscrollbars~=scrollbarHidden],
:root [data-overlayscrollbars-viewport~=scrollbarHidden],
:root [data-overlayscrollbars-contents="true"] {
  /* stylelint-disable-next-line plugin/use-baseline */
  scrollbar-width: none !important;
}

:root [data-overlayscrollbars-initialize]::-webkit-scrollbar,
:root [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
:root [data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,
:root [data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,
:root [data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,
:root [data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,
:global(.os-environment-scrollbar-hidden::-webkit-scrollbar),
:global(.os-environment-scrollbar-hidden::-webkit-scrollbar-corner) {
  -webkit-appearance: none !important;
          appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
:root [data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(:global(html)):not(:global(body)) {
  overflow: auto;
}
:global(html[data-overlayscrollbars]) {
  box-sizing: border-box;
  margin: 0;
}

:global(html[data-overlayscrollbars~=body]),
:global(html[data-overlayscrollbars~=body]) > :global(body) {
  width: 100%;
  height: 100%;
}

:global(html[data-overlayscrollbars~=viewport]) > :global(body) {
  overflow: visible;
}
:root [data-overlayscrollbars~=host],
:root [data-overlayscrollbars-padding] {
  display: flex;
  align-items: stretch !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

:root [data-overlayscrollbars-padding],
:root [data-overlayscrollbars-viewport] {
  box-sizing: inherit;
  position: relative;
  flex: auto !important;
  height: auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 0;
}

:root [data-overlayscrollbars-viewport] {
  --os-vaw: 0;
  --os-vah: 0;
}

:root [data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  min-width: 1px;
  min-height: 1px;
  width: var(--os-vaw);
  height: var(--os-vah);
}

:root [data-overlayscrollbars-padding],
:root [data-overlayscrollbars-viewport] {
  overflow: hidden;
}

:root [data-overlayscrollbars~=host],
:root [data-overlayscrollbars~=viewport] {
  position: relative;
  overflow: hidden;
}

:root [data-overlayscrollbars~=overflowVisible],
:root [data-overlayscrollbars-padding~=overflowVisible],
:root [data-overlayscrollbars-viewport~=overflowVisible] {
  overflow: visible;
}

:root [data-overlayscrollbars-overflow-x=hidden] {
  overflow-x: hidden;
}

:root [data-overlayscrollbars-overflow-x=scroll] {
  overflow-x: scroll;
}

:root [data-overlayscrollbars-overflow-x=hidden] {
  overflow-y: hidden;
}

:root [data-overlayscrollbars-overflow-y=scroll] {
  overflow-y: scroll;
}

:root [data-overlayscrollbars~=scrollbarPressed],
:root [data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport] {
  scroll-behavior: auto !important;
}

:root [data-overlayscrollbars-content] {
  box-sizing: inherit;
}
:root [data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) {
  display: contents;
}
:root [data-overlayscrollbars-grid],
:root [data-overlayscrollbars-grid] [data-overlayscrollbars-padding] {
  display: grid;
  grid-template: 1fr/1fr;
}

:root [data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],
:root [data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],
:root [data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport] {
  height: auto !important;
  width: auto !important;
}

:global(.os-scrollbar) {
  contain: size layout;
  contain: size layout style;
  transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
  pointer-events: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

:global(body) > :global(.os-scrollbar) {
  position: fixed;
  z-index: 99999;
}

:global(.os-scrollbar-transitionless) {
  transition: none;
}

:global(.os-scrollbar-track) {
  position: relative;
  direction: ltr !important;
  padding: 0 !important;
  border: none !important;
}

:global(.os-scrollbar-handle) {
  position: absolute;
}

:global(.os-scrollbar-track),
:global(.os-scrollbar-handle) {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

:global(.os-scrollbar.os-scrollbar-track-interactive) :global(.os-scrollbar-track),
:global(.os-scrollbar.os-scrollbar-handle-interactive) :global(.os-scrollbar-handle) {
  pointer-events: auto;
  touch-action: none;
}

:global(.os-scrollbar-vertical) {
  top: 0;
  right: 0;
}

:global(.os-scrollbar-rtl.os-scrollbar-vertical) {
  right: auto;
  left: 0;
}

:global(.os-scrollbar-visible) {
  opacity: 1;
  visibility: visible;
}

:global(.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden) {
  opacity: 0;
  visibility: hidden;
}

:global(.os-scrollbar-interaction.os-scrollbar-visible) {
  opacity: 1;
  visibility: visible;
}

:global(.os-scrollbar-unusable),
:global(.os-scrollbar-unusable *),
:global(.os-scrollbar-wheel),
:global(.os-scrollbar-wheel) * {
  pointer-events: none !important;
}

:global(.os-scrollbar-unusable) :global(.os-scrollbar-handle) {
  opacity: 0 !important;
}

:global(.os-scrollbar-vertical) :global(.os-scrollbar-handle) {
  right: 0;
}

:global(.os-scrollbar-rtl.os-scrollbar-vertical) :global(.os-scrollbar-handle) {
  right: auto;
  left: 0;
}

:global(.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless),
:global(.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl) {
  top: 0;
  bottom: 0;
}

.overlay-scrollbar {
  overflow: hidden;
}

:global(.os-scrollbar) :global(.os-scrollbar-handle) {
  border-radius: var(--wds-border-radius-full, calc(3px * 2));
  background: chains.$scrollbar-fill;
}

@media (hover: hover) {
  :global(.os-scrollbar) :global(.os-scrollbar-handle):hover {
    background: chains.$scrollbar-fill-hover;
  }
}

:global(.os-scrollbar) :global(.os-scrollbar-handle):active {
  background: chains.$scrollbar-fill-active;
}

:global(.os-scrollbar-vertical) {
  padding: $padding-y $padding-x;
  bottom: chains.$scrollbar-width;
  width: chains.$scrollbar-width;
}

:global(.os-scrollbar-vertical) :global(.os-scrollbar-handle) {
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
  min-height: 33px;
}

:global(.os-scrollbar-vertical) :global(.os-scrollbar-handle)::before {
  left: calc((#{$padding-x} + #{$interactive-area-offset}) * -1);
  right: calc(#{$padding-x} * -1);
}

:global(.os-scrollbar-vertical) :global(.os-scrollbar-rtl) :global(.os-scrollbar-handle)::before {
  right: calc((#{$padding-x} + #{$interactive-area-offset}) * -1);
  left: calc(#{$padding-x} * -1);
}

:global(.os-scrollbar-horizontal) {
  display: none;
}