Generated by SassMeister.com.

input.scss

$white: #fff;

$primary: #00a4b3;
$error: #e22323;
$info: #4a77c4;
$light-grey: #999;

.on-hold {
        border-radius: 10px;
        padding: 3px 10px;
        color: $white;
        margin: auto;
        font-weight: 500;
        font-size: 15px;
        background: darken($info, 10%);
        background: linear-gradient(0deg, darken($primary, 10%) 0%, $info 50%, lighten($error, 5) 100%);
        i {
          margin-right: 5px;
        }
      }
      
$darken-amount: 10;
$lightened-grey: lighten(
  $color: $light-grey,
  $amount: 30,
);
$darkened-grey: darken(
  $color: $light-grey,
  $amount: $darken-amount,
);
$lightened-primary: lighten(
  $color: $primary,
  $amount: 56,
);
$darkened-primary: darken(
  $color: $primary,
  $amount: $darken-amount,
);
$lightened-info: lighten(
  $color: $info,
  $amount: 36,
);
$darkened-info: darken(
  $color: $info,
  $amount: $darken-amount,
);
$lightened-error: lighten(
  $color: $error,
  $amount: 43,
);
$darkened-error: darken(
  $color: $error,
  $amount: $darken-amount,
);
.scrollbar {
    --scroll-color: #{$light-grey};
    --scroll-light-color: #{$lightened-grey};
    --scroll-dark-color: #{$darkened-grey};
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--scroll-light-color);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    border-width: 1px 0px;
    border-style: solid;

    border-color: var(--scroll-light-color);
    background-color: var(--scroll-color);
    &:hover {
      background-color: var(--scroll-dark-color);
    }
  }

  /* buttons */
  &::-webkit-scrollbar-button:single-button {
    display: block;
    border-style: solid;
    height: 10px;
    width: 10px;

    background-color: var(--scroll-light-color);
    /* up */
    &:vertical {
      &:decrement {
        border-width: 0 5px 8px 5px;

        border-color: transparent transparent var(--scroll-color) transparent;
        &:hover {
          border-color: transparent transparent var(--scroll-dark-color) transparent;
        }
      }
    }
    /* down */
    &:increment {
      border-width: 8px 5px 0 5px;

      border-color: var(--scroll-color) transparent transparent transparent;
      &:hover {
        border-color: var(--scroll-dark-color) transparent transparent transparent;
      }
    }
  }

  &-primary {
    --scroll-color: #{$primary};
    --scroll-light-color: #{$lightened-primary};
    --scroll-dark-color: #{$darkened-primary};
  }

  &-info {
    --scroll-color: #{$info};
    --scroll-light-color: #{$lightened-info};
    --scroll-dark-color: #{$darkened-info};
  }

  &-error {
    --scroll-color: #{$error};
    --scroll-light-color: #{$lightened-error};
    --scroll-dark-color: #{$darkened-error};
  }

  &-bg-white {
    &::-webkit-scrollbar-track {
      background-color: $white !important;
    }
    &::-webkit-scrollbar-thumb {
      border-color: $white !important;
    }
    &::-webkit-scrollbar-button:single-button {
      background-color: $white !important;
    }
  }
}

body {
    padding: 2rem;
    background: #f3f3f3;
}

.grid {
    $self: &;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 1rem;
    
    // Add flow between grids 
    & + #{ $self } {
        margin-top: 3rem;
    }
    
    &__item {
        padding: 3rem;
        background: lightgray;
        color: white;
        border-radius: 0.5rem;
        
        // For each direct .grid sibling, make this item rebeccapurple
        #{ $self } + #{ $self } & {
            background: rebeccapurple;
        }
    }
}

markup.html

<div class="scrollbar scrollbar-primary" style="height:400px;width:520px;overflow:auto;">
    <div class="on-hold" style="height:500px;width:500px;"></div>
</div>

<div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
</div>
<div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
</div>
<div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
</div>

output.css

.on-hold {
  border-radius: 10px;
  padding: 3px 10px;
  color: #fff;
  margin: auto;
  font-weight: 500;
  font-size: 15px;
  background: #365fa5;
  background: linear-gradient(0deg, #007580 0%, #4a77c4 50%, #e53a3a 100%);
}
.on-hold i {
  margin-right: 5px;
}

.scrollbar {
  --scroll-color: #999;
  --scroll-light-color: #e6e6e6;
  --scroll-dark-color: gray;
  /* buttons */
}
.scrollbar::-webkit-scrollbar {
  width: 10px;
}
.scrollbar::-webkit-scrollbar-track {
  background-color: var(--scroll-light-color);
}
.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px;
  border-width: 1px 0px;
  border-style: solid;
  border-color: var(--scroll-light-color);
  background-color: var(--scroll-color);
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-dark-color);
}
.scrollbar::-webkit-scrollbar-button:single-button {
  display: block;
  border-style: solid;
  height: 10px;
  width: 10px;
  background-color: var(--scroll-light-color);
  /* up */
  /* down */
}
.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 5px 8px 5px;
  border-color: transparent transparent var(--scroll-color) transparent;
}
.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent var(--scroll-dark-color) transparent;
}
.scrollbar::-webkit-scrollbar-button:single-button:increment {
  border-width: 8px 5px 0 5px;
  border-color: var(--scroll-color) transparent transparent transparent;
}
.scrollbar::-webkit-scrollbar-button:single-button:increment:hover {
  border-color: var(--scroll-dark-color) transparent transparent transparent;
}
.scrollbar-primary {
  --scroll-color: #00a4b3;
  --scroll-light-color: #d2fbff;
  --scroll-dark-color: #007580;
}
.scrollbar-info {
  --scroll-color: #4a77c4;
  --scroll-light-color: #d4dff1;
  --scroll-dark-color: #365fa5;
}
.scrollbar-error {
  --scroll-color: #e22323;
  --scroll-light-color: #fce5e5;
  --scroll-dark-color: #ba1818;
}
.scrollbar-bg-white::-webkit-scrollbar-track {
  background-color: #fff !important;
}
.scrollbar-bg-white::-webkit-scrollbar-thumb {
  border-color: #fff !important;
}
.scrollbar-bg-white::-webkit-scrollbar-button:single-button {
  background-color: #fff !important;
}

body {
  padding: 2rem;
  background: #f3f3f3;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
}
.grid + .grid {
  margin-top: 3rem;
}
.grid__item {
  padding: 3rem;
  background: lightgray;
  color: white;
  border-radius: 0.5rem;
}
.grid + .grid .grid__item {
  background: rebeccapurple;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}