/*******************************************************************************
 * SCROLLBAR
 *******************************************************************************/

::-webkit-scrollbar {
  background-color: var(--aero-c-dialog-bg);
}

::-webkit-scrollbar:vertical {
  width: 17px;
  border-left: 1px solid var(--aero-c-control-separator);
}

::-webkit-scrollbar:horizontal {
  height: 17px;
  border-top: 1px solid var(--aero-c-control-separator);
}

/*******************************************************************************
 * THUMB & BUTTON COMMON
 *******************************************************************************/

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
  border-radius: 4px;
  
  background-position: center;
  background-repeat: no-repeat;
}

/* Hover */

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-button:hover {
  border-color: var(--aero-c-control-border-hover);
}

/* Active */

::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-button:active {
  border-color: var(--aero-c-control-border-active);
  box-shadow: 
    inset 1px 0 0 0 var(--aero-c-control-lowlight-active),
    inset 0 1px 0 0 var(--aero-c-control-lowlight-active) !important;
}

/*******************************************************************************
 * THUMB
 *******************************************************************************/

::-webkit-scrollbar-thumb {
  border: 1px solid var(--aero-c-button-border);
  box-shadow: inset 0 0 0 1px var(--aero-c-button-light);
  
  background-color: var(--aero-c-button-bg);
}

::-webkit-scrollbar-thumb:vertical {
  background-image:
    var(--aero-g-button-horizontal),
    var(--aero-v-scrollbar-thumb-vertical);
}
::-webkit-scrollbar-thumb:horizontal {
  background-image:
    var(--aero-g-button),
    var(--aero-v-scrollbar-thumb-horizontal);
}

/* Hover */

::-webkit-scrollbar-thumb:vertical:hover {
  background-image:
    linear-gradient(
      var(--aero-c-control-hover-overlay),
      var(--aero-c-control-hover-overlay)
    ),
    var(--aero-g-button-horizontal),
    var(--aero-v-scrollbar-thumb-vertical);
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background-image:
    linear-gradient(
      var(--aero-c-control-hover-overlay),
      var(--aero-c-control-hover-overlay)
    ),
    var(--aero-g-button),
    var(--aero-v-scrollbar-thumb-horizontal);
}

/* Active */

::-webkit-scrollbar-thumb:vertical:active {
  background-image:
    linear-gradient(
      var(--aero-c-control-active-overlay),
      var(--aero-c-control-active-overlay)
    ),
    var(--aero-g-button-horizontal),
    var(--aero-v-scrollbar-thumb-vertical);
}
::-webkit-scrollbar-thumb:horizontal:active {
  background-image:
    linear-gradient(
      var(--aero-c-control-active-overlay),
      var(--aero-c-control-active-overlay)
    ),
    var(--aero-g-button),
    var(--aero-v-scrollbar-thumb-horizontal);
}

/*******************************************************************************
 * BUTTON
 *******************************************************************************/

::-webkit-scrollbar-button {
  width: 17px;
  height: 17px;
  
  border: 1px solid transparent;
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: var(--aero-v-caret-up);
}
::-webkit-scrollbar-button:vertical:increment {
  background-image: var(--aero-v-caret-down);
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: var(--aero-v-caret-left);
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: var(--aero-v-caret-right);
}

/* Hover */

::-webkit-scrollbar-button:hover {
  box-shadow: inset 0 0 0 1px var(--aero-c-button-light);
}

::-webkit-scrollbar-button:vertical:decrement:hover {
  background-image:
    linear-gradient(
      var(--aero-c-control-hover-overlay),
      var(--aero-c-control-hover-overlay)
    ),
    var(--aero-g-button-horizontal),
    var(--aero-v-caret-up);
}
::-webkit-scrollbar-button:vertical:increment:hover {
  background-image:
    linear-gradient(
      var(--aero-c-control-hover-overlay),
      var(--aero-c-control-hover-overlay)
    ),
    var(--aero-g-button-horizontal),
    var(--aero-v-caret-down);
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  background-image:
    linear-gradient(
      var(--aero-c-control-hover-overlay),
      var(--aero-c-control-hover-overlay)
    ),
    var(--aero-g-button),
    var(--aero-v-caret-left);
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  background-image:
    linear-gradient(
      var(--aero-c-control-hover-overlay),
      var(--aero-c-control-hover-overlay)
    ),
    var(--aero-g-button),
    var(--aero-v-caret-right);
}

/* Active */

::-webkit-scrollbar-button:vertical:decrement:active {
  background-image:
    linear-gradient(
      var(--aero-c-control-active-overlay),
      var(--aero-c-control-active-overlay)
    ),
    var(--aero-g-button-horizontal),
    var(--aero-v-caret-up);
}
::-webkit-scrollbar-button:vertical:increment:active {
  background-image:
    linear-gradient(
      var(--aero-c-control-active-overlay),
      var(--aero-c-control-active-overlay)
    ),
    var(--aero-g-button-horizontal),
    var(--aero-v-caret-down);
}
::-webkit-scrollbar-button:horizontal:decrement:active {
  background-image:
    linear-gradient(
      var(--aero-c-control-active-overlay),
      var(--aero-c-control-active-overlay)
    ),
    var(--aero-g-button),
    var(--aero-v-caret-left);
}
::-webkit-scrollbar-button:horizontal:increment:active {
  background-image:
    linear-gradient(
      var(--aero-c-control-active-overlay),
      var(--aero-c-control-active-overlay)
    ),
    var(--aero-g-button),
    var(--aero-v-caret-right);
}

/* Disable the double button */

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}