@mixin scrollbar($hovered: true, $bgColor: transparent, $color: #909090) {
  &::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: $bgColor;
  }

  &::-webkit-scrollbar-thumb {
    height: 56px;
    border-radius: 16px;
    border: 4px solid transparent;
    background-clip: content-box;
    background-color: $color;

    @if $hovered {
      @media (min-width: 721px) {
        background-color: transparent;
      }
    } @else {
      background-color: $color;
    }

    &:hover {
      background-color: darken($color, 10%);
    }
  }

  @if $hovered {
    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: $color;

        &:hover {
          background-color: darken($color, 10%);
        }
      }
    }
  }
}

@mixin no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@mixin flex($display: flex, $direction: row, $wrap: nowrap) {
  display: $display;
  flex-direction: $direction;
  flex-wrap: $wrap;
}