/**
 * 滚动条样式
 * 此处也涉及 Scrollbar 组件
 */
@mixin scrollbar() {
  &::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  &::-webkit-scrollbar-thumb {
    min-width: 14px;
    min-height: 14px;
    background-color: rgba(0, 0, 0, 0.15);
    background-clip: content-box;
    border: 4px solid transparent;
    border-radius: 14px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }

    &:active {
      background-color: rgba(0, 0, 0, 0.65);
    }
  }
}

@mixin overlay() {
  overflow: auto;
  @supports (overflow: overlay) {
    overflow: overlay;
  }
  @include scrollbar();
}

/**
 * 统一 placeholder 样式
 */
@mixin placeholder($color: var(--gray-700)) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: $color;
  }
  // Safari & Chrome
  &::-webkit-input-placeholder {
    color: $color;
  }
}