@mixin text-overflow-ellipsis($width: 100%) {
  max-width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin block-shadow {
  box-shadow: 0 3px 3px -2px var(--shadow-key-1),
  0 3px 4px 0 var(--shadow-key-2),
  0 1px 8px 0 var(--shadow-key-3),
}

@mixin elevation($number: 1) {
  @if $number == 3 {
    box-shadow: 0 3px 3px -2px var(--shadow-key-1),
    0 3px 4px 0 var(--shadow-key-2),
    0 1px 8px 0 var(--shadow-key-3),
  } @else if $number == 2 {
    box-shadow: 0 2px 1px -2px var(--shadow-key-1),
    0 2px 2px 0 var(--shadow-key-2),
    0 1px 5px 0 var(--shadow-key-3),
  } @else {
    box-shadow: 0 2px 1px -1px var(--shadow-key-1),
    0 1px 1px 0 var(--shadow-key-2),
    0 1px 3px 0 var(--shadow-key-3),
  }
}

@mixin dropShadow() {
  box-shadow: 0 0 2px 0 var(--shadow-key-1), 0 2px 5px 0 var(--shadow-key-2);
}

/* stylelint-disable nesting-selector-no-missing-scoping-root */
@mixin scrollbar($size: 200px) {
  &::-webkit-scrollbar-track {
    background-color: var(transparent);
  }

  &::-webkit-scrollbar-thumb {
    height: $size;
    background-color: var(--color-bg-control-accent-disabled);
    border-radius: 80px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-bg-control-accent-hover);
    cursor: pointer;
  }
}

@mixin scrollbar-vertical($size: 200px) {
  &::-webkit-scrollbar {
    width: 8px;
  }
  @include scrollbar($size);
}

@mixin scrollbar-horizontal($size: 200px) {
  &::-webkit-scrollbar {
    height: 8px;
  }
  @include scrollbar($size);
}
/* stylelint-enable */
