Mixins

Overall Mixins

@use './_scrollbar.tokens.scss' as *;

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: $scrollbar-width;
    height: $scrollbar-width;
  }

  &::-webkit-scrollbar-track {
    background-color: $scrollbar-bgColor;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $scrollbar-cornerRadius;
    -webkit-border-radius: $scrollbar-tiny-cornerRadius;
    -moz-border-radius: $scrollbar-tiny-cornerRadius;
    -ms-border-radius: $scrollbar-tiny-cornerRadius;
    -o-border-radius: $scrollbar-tiny-cornerRadius;

    background-color: $scrollbar-thumb;
    border: 1px solid transparent;
    background-clip: padding-box;

    &:hover {
      background-color: $scrollbar-thumb--hover;
    }

    &:active {
      background-color: $scrollbar-thumb--active;
    }
  }

  &::-webkit-scrollbar-button {
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--gutter-xs);
    background-color: $scrollbar-bgColor;

    &:vertical:decrement {
      background-image: var(--icon-chevron_up);
    }

    &:horizontal:decrement {
      background-image: var(--icon-chevron_left);
    }

    &:vertical:increment {
      background-image: var(--icon-chevron_down);
    }

    &:horizontal:increment {
      background-image: var(--icon-chevron_right);
    }
  }
}

@mixin scrollbar-tiny {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;

  &::-webkit-scrollbar {
    width: $scrollbar-tiny-total-width;
    height: $scrollbar-tiny-total-width;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $scrollbar-tiny-cornerRadius;
    -webkit-border-radius: $scrollbar-tiny-cornerRadius;
    -moz-border-radius: $scrollbar-tiny-cornerRadius;
    -ms-border-radius: $scrollbar-tiny-cornerRadius;
    -o-border-radius: $scrollbar-tiny-cornerRadius;

    background: $scrollbar-tiny-thumb-bgColor;
    // Use transparent borders to create 1px padding on both sides
    border-left: $scrollbar-tiny-padding solid transparent;
    border-right: $scrollbar-tiny-padding solid transparent;
    // Clip background to content box so it only shows in the middle 8px
    background-clip: content-box;

    &:active {
      background-color: $scrollbar-tiny-thumb-bgColor--active;
    }

    &:hover {
      background-color: $scrollbar-tiny-thumb-bgColor--hover;
    }
  }
}