@mixin no-select {
  -webkit-user-drag: none;
  user-select: none;
  :global [contenteditable] {
    user-select: text;
  }
}

@mixin respect-new-lines {
  white-space: pre-line;
  word-break: break-word;
}

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

@mixin line-clamp($lines) {
  white-space: pre-line;
  word-break: break-word;

  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
}

@mixin width($width) {
  width: $width;
  min-width: $width;
  max-width: $width;
}

@mixin height($height) {
  height: $height;
  min-height: $height;
  max-height: $height;
}

@mixin hide-empty($display: block) {
  :global &:not(:has(*)) {
    display: none !important;
  }

  :global &:has(*) {
    display: $display !important;
  }
}

@mixin absolute-fill {
  position: absolute;
  inset: 0;
}

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin media-fit($objectFit: cover) {
  object-fit: $objectFit;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
}

@mixin scrollbar($thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)), $track-color: var(--scrollbar--track-color, transparent)) {
  --_cross-browser-scrollbar--thumb-color: #{$thumb-color};
  --_cross-browser-scrollbar--track-color: #{$track-color};

  @include _cross-browser-scrollbar;
}

@mixin scrollbar-on-hover($thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563)), $track-color: var(--scrollbar--track-color, transparent)) {
  --_cross-browser-scrollbar--thumb-color: transparent;
  --_cross-browser-scrollbar--track-color: transparent;

  &:hover {
    --_cross-browser-scrollbar--thumb-color: #{$thumb-color};
    --_cross-browser-scrollbar--track-color: #{$track-color};
  }

  @include _cross-browser-scrollbar;
}

@mixin _cross-browser-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--_cross-browser-scrollbar--track-color);
    border-radius: 100vw;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--_cross-browser-scrollbar--thumb-color);
    border-radius: 100vw;
  }

  @supports (scrollbar-color: transparent transparent) {
    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
    scrollbar-width: thin;
  }
}

@mixin fade-in-animation($duration: 5s) {
  animation: fadeIn $duration linear infinite;

  @keyframes fadeIn {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    100% {
      opacity: 1;
    }
  }
}