$--vtj-background-color: #fff;
$--vtj-color: #333;
$--vtj-border-color: #ddd;
$--vtj-primary-color: #409eff;
$--vtj-primary-color-light-9: #ecf5ff;
$--vtj-primary-color-light-5: #a0cfff;

$--vtj-secondary-color: #666;
$--vtj-color-light-9: #fafafa;
$--vtj-background-color-dark-9: #f9f9f9;

$--vtj-warning-color: #b88230;
$--vtj-success-color: #529b2e;
$--vtj-danger-color: #c45656;

$--vtj-warning-color-light: #faecd8;
$--vtj-success-color-light: #e1f3d8;
$--vtj-danger-color-light: #fde2e2;

@mixin scroll-bar {
  $--scrollbar-thumb-background: rgba(0, 0, 0, 0.15);
  $--scrollbar-track-background: transparent;

  ::-webkit-scrollbar {
    z-index: 11;
    width: 8px;
    height: 8px;

    &-thumb {
      border-radius: 5px;
      width: 8px;
      background: $--scrollbar-thumb-background;
    }

    &-corner {
      background: $--scrollbar-track-background;
    }

    &-track {
      background: $--scrollbar-track-background;

      &-piece {
        background: $--scrollbar-track-background;
        width: 8px;
      }
    }
  }
}
