/* ==========================================================================
 * Scrollbar
 * ========================================================================== */

@define-mixin mds-m-scrollbar {
  &::-webkit-scrollbar {
    background-color: var(--mds-t-background-color--primary);
    height: var(--mds-d-spacing--med);
    width: var(--mds-d-spacing--med);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--mds-d-color-ui--3);
    border: var(--mds-d-spacing--xxs) solid
      var(--mds-t-background-color--primary);
    border-radius: var(--mds-d-spacing--med);
  }
}

@define-mixin mds-m-scrollbar-panel {
  &::-webkit-scrollbar {
    background-color: var(--mds-t-background-color--secondary);
    height: var(--mds-d-spacing--med);
    width: var(--mds-d-spacing--med);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--mds-d-color-ui--3);
    border: var(--mds-d-spacing--xxs) solid
      var(--mds-t-background-color--secondary);
    border-radius: var(--mds-d-spacing--med);
  }
}