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

.box {
  gap: var(--wds-internal-box-gap);
  display: flex;

  @supports (not (translate: none)) and (not (appearance: auto)) {
    gap: 0;
    margin: calc(var(--wds-internal-box-gap) / -2)
      calc(var(--wds-internal-box-gap) / -2);

    & > * {
      margin: calc(var(--wds-internal-box-gap) / 2)
        calc(var(--wds-internal-box-gap) / 2);
    }
  }

  &::-webkit-scrollbar {
    height: 0;
    width: 12px;
  }

  &::-webkit-scrollbar-button {
    display: none;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: chains.$scrollbar-fill;
    background-clip: content-box;
    border-radius: var(--wds-border-radius-full, calc(3px * 2));
    border: calc((12px - #{chains.$scrollbar-width}) / 2) solid transparent;
    height: 72px;
  }

  @media (hover: hover) {
    &::-webkit-scrollbar-thumb:hover {
      background-color: chains.$scrollbar-fill-hover;
    }
  }

  &::-webkit-scrollbar-thumb:active {
    background-color: chains.$scrollbar-fill-active;
  }

  &#{&}--inline {
    display: inline-flex;
  }

  &#{&}--direction-horizontal {
    flex-direction: row;
  }

  &#{&}--direction-horizontal#{&}--align-left {
    justify-content: flex-start;
  }

  &#{&}--direction-horizontal#{&}--align-center {
    justify-content: center;
  }

  &#{&}--direction-horizontal#{&}--align-right {
    justify-content: flex-end;
  }

  &#{&}--direction-horizontal#{&}--vertical-align-top {
    align-items: flex-start;
  }

  &#{&}--direction-horizontal#{&}--vertical-align-middle {
    align-items: center;
  }

  &#{&}--direction-horizontal#{&}--vertical-align-bottom {
    align-items: flex-end;
  }

  &#{&}--direction-vertical {
    flex-direction: column;
  }

  &#{&}--direction-vertical#{&}--align-left {
    align-items: flex-start;
  }

  &#{&}--direction-vertical#{&}--align-center {
    align-items: center;
  }

  &#{&}--direction-vertical#{&}--align-right {
    align-items: flex-end;
  }

  &#{&}--direction-vertical#{&}--vertical-align-top {
    justify-content: flex-start;
  }

  &#{&}--direction-vertical#{&}--vertical-align-middle {
    justify-content: center;
  }

  &#{&}--direction-vertical#{&}--vertical-align-bottom {
    justify-content: flex-end;
  }

  &#{&}--direction-horizontal#{&}--align-space-between,
  &#{&}--direction-horizontal#{&}--vertical-align-space-between,
  &#{&}--direction-vertical#{&}--align-space-between,
  &#{&}--direction-vertical#{&}--vertical-align-space-between {
    justify-content: space-between;
  }
}