/* Core Extendables
  =========================================================================== */

%clearfix { overflow: auto; }

%remove-list-style {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Shadow Extendables
=========================================================================== */
%shadow-50 { @include box-shadow(0 2px 4px rgba(0,0,0, 0.5)); }
%shadow-100 { @include box-shadow(0 4px 8px rgba(0,0,0, 0.3)); }
%shadow-200 { @include box-shadow(0 4px 16px rgba(0,0,0, 0.3)); }
%shadow-300 { @include box-shadow(0 4px 24px rgba(0,0,0, 0.3)); }

/* Action Extendables
  =========================================================================== */
%button--round  { border-radius: 50px; }
%button--smooth { border-radius: 5px; }
%button--square { border-radius: 0; }

/* Custom Scrollbar Extendables
  =========================================================================== */
%scrollbar-custom--light {
  &::-webkit-scrollbar-button { background-color: transparent; }
  &::-webkit-scrollbar-corner { background-color: transparent; }
  &::-webkit-scrollbar-track { background-color: transparent; }
  &::-webkit-scrollbar {
    background-color: transparent;
    height: 20px;
    width: 15px;
  }
  &::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: $gray-400c;
    border: 4px solid transparent;
    border-radius: 10px;
    min-height: 2rem;
  }
}

%scrollbar-custom--dark {
  &::-webkit-scrollbar-button { background-color: transparent; }
  &::-webkit-scrollbar-corner { background-color: transparent; }
  &::-webkit-scrollbar-track { background-color: transparent; }
  &::-webkit-scrollbar {
    background-color: transparent;
    height: 20px;
    width: 15px;
  }
  &::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: rgba($gray-200c, 0.3);
    border: 4px solid transparent;
    border-radius: 10px;
    min-height: 2rem;
  }
}