.horizontal-scrollbar,
.vertical-scrollbar {
  display: grid;

  & > button {
    display: flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 0;
    padding: 0;
    background: #ddd;
    box-shadow: inset 1px 1px #fff, inset -1px -1px #bbb;
    border-radius: 0;

    &::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
    }

    &:not(:disabled):active {
      padding: 0;
      background: #777;
      box-shadow: inset 1px 1px #555, inset -1px -1px #999;
      box-shadow: none;
      outline: none;
    }
  }

  & > .scrollbar-track {
    flex-grow: 1;
    background: #aaa;
    position: relative;
    box-shadow: inset 1px 1px #777, inset 2px 2px #888, inset -1px -1px #ccc, inset -2px -2px #bbb;
    overflow: hidden;
    border: 1px solid #000;

    & > .scrollbar-thumb {
      position: absolute;
      background: var(--primary-4);
      box-shadow: inset 1px 1px var(--primary-5), inset -1px -1px var(--primary-3), 1px 1px #777, 2px 2px #888;
      display: flex;
      align-items: center;
      justify-content: center;

      &:active {
        background: var(--primary-3);
        box-shadow: inset 1px 1px var(--primary-4), inset -1px -1px var(--primary-2), 1px 1px #777, 2px 2px #888;
      }
    }
  }
}

.horizontal-scrollbar {
  grid-template-columns: 1fr 16px 16px;

  & > button:first-child {
    border-left: 0;
    border-right: 0;
    grid-column: 2;

    &::after {
      border-right: 4px solid #000;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      margin: 3px 0 0 5px;
    }
  }

  & > button:last-child {
    grid-column: 3;


    &::after {
      border-left: 4px solid #000;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      margin: 3px 0 0 5px;
    }
  }

  & > .scrollbar-track {
    grid-column: 1;
    grid-row: 1;

    & > .scrollbar-thumb {
      top: 0;
      bottom: 0;
      border-left: 1px solid #000;
      border-right: 1px solid #000;

      &::after {
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        background-image:
          linear-gradient(90deg, var(--primary-6), var(--primary-6) 1px, transparent 1px, transparent 2px),
          linear-gradient(90deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
          linear-gradient(90deg, transparent, transparent 1px, var(--primary-2) 1px, var(--primary-2) 2px);
        background-repeat: repeat-x;
        background-position-x: 0, 0, 0;
        background-position-y: -1px, -1px, 1px;
        background-size: 2px 2px, 2px 100%, 2px 100%;
      }

      &:active::after {
        background-image:
          linear-gradient(90deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
          linear-gradient(90deg, var(--primary-4), var(--primary-4) 1px, transparent 1px, transparent 2px),
          linear-gradient(90deg, transparent, transparent 1px, var(--primary-1) 1px, var(--primary-1) 2px);
      }
    }
  }
}

.vertical-scrollbar {
  grid-template-rows: 1fr 16px 16px;
  width: 16px;

  & > button:first-child {
    border-top: 0;
    border-bottom: 0;
    grid-row: 2;

    &::after {
      border-bottom: 4px solid #000;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      margin: 5px 0 0 3px;
    }
  }

  & > button:last-child {
    grid-row: 3;

    &::after {
      border-top: 4px solid #000;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      margin: 5px 0 0 3px;
    }
  }

  & > .scrollbar-track {
    grid-row: 1;

    & > .scrollbar-thumb {
      left: 0;
      right: 0;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;

      &::after {
        display: block;
        content: '';
        width: 8px;
        height: 8px;
        background-image:
          linear-gradient(180deg, var(--primary-6), var(--primary-6) 1px, transparent 1px, transparent 2px),
          linear-gradient(180deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
          linear-gradient(180deg, transparent, transparent 1px, var(--primary-2) 1px, var(--primary-2) 2px);
        background-repeat: repeat-y;
        background-position-x: -1px, -1px, 1px;
        background-position-y: 0, 0, 0;
        background-size: 2px 2px, 100% 2px, 100% 2px;
      }

      &:active::after {
        background-image:
          linear-gradient(180deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
          linear-gradient(180deg, var(--primary-4), var(--primary-4) 1px, transparent 1px, transparent 2px),
          linear-gradient(180deg, transparent, transparent 1px, var(--primary-1) 1px, var(--primary-1) 2px);
      }
    }
  }
}

::-webkit-scrollbar {
  background: #aaa;
  box-shadow: inset 1px 1px #777, inset 2px 2px #888, inset -1px -1px #ccc, inset -2px -2px #bbb;
  border: 1px solid #000;
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-corner {
  background: #aaa;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-thumb {
  background: #ddd;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #bbb;
  border: 1px solid #000;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-4);
  background-repeat: no-repeat;
  background-size: 8px 8px;
  background-position: center center;

  &:vertical {
    background-image:
      repeating-linear-gradient(180deg, var(--primary-6), var(--primary-6) 1px, transparent 1px, transparent 2px),
      repeating-linear-gradient(180deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
      repeating-linear-gradient(180deg, transparent, transparent 1px, var(--primary-2) 1px, var(--primary-2) 2px);
    background-position-x: calc(50% - 4px), calc(50% - 1px), 50%;
    background-size: 1px 8px, 7px 8px, 7px 8px;
    box-shadow: inset 1px 1px var(--primary-5), inset -1px -1px var(--primary-3), 0 1px #777, 0 2px #888;
  }

  &:horizontal {
    background-image:
      repeating-linear-gradient(90deg, var(--primary-6), var(--primary-6) 1px, transparent 1px, transparent 2px),
      repeating-linear-gradient(90deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
      repeating-linear-gradient(90deg, transparent, transparent 1px, var(--primary-2) 1px, var(--primary-2) 2px);
    background-position-y: calc(50% - 4px), calc(50% - 1px), 50%;
    background-size: 8px 1px, 8px 7px, 8px 7px;
    box-shadow: inset 1px 1px var(--primary-5), inset -1px -1px var(--primary-3), 1px 0 #777, 2px 0 #888;
  }

  &:active {
    background-color: var(--primary-3);

    &:vertical {
      background-image:
        repeating-linear-gradient(180deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(180deg, var(--primary-4), var(--primary-4) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(180deg, transparent, transparent 1px, var(--primary-1) 1px, var(--primary-1) 2px);
      box-shadow: inset 1px 1px var(--primary-4), inset -1px -1px var(--primary-2), 0 1px #777, 0 2px #888;
    }

    &:horizontal {
      background-image:
        repeating-linear-gradient(90deg, var(--primary-5), var(--primary-5) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, var(--primary-4), var(--primary-4) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, transparent, transparent 1px, var(--primary-1) 1px, var(--primary-1) 2px);
      box-shadow: inset 1px 1px var(--primary-4), inset -1px -1px var(--primary-2), 1px 0 #777, 2px 0 #888;
    }
  }
}

::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  display: none;

  &:active {
    background: #777;
    box-shadow: inset 1px 1px #555, inset -1px -1px #999;
    box-shadow: none;
  }
}

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

::-webkit-scrollbar-button:active {
  box-shadow: none;
}

::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(arrow-up.svg);
  background-position: 3px 5px;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:vertical:increment {
  background-image: url(arrow-down.svg);
  background-position: 3px 5px;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(arrow-left.svg);
  background-position: 4px 3px;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(arrow-right.svg);
  background-position: 4px 3px;
  background-repeat: no-repeat;
}