@mixin card() {
  display: block;
  overflow: hidden;
  border-radius: $border-radius;
  border: 2px solid var(--card-border-color);
  background-color: var(--card-bg-color);
  text-decoration: none;

  &:hover {
    background-color: var(--card-bg-hover-color);
    border: 2px solid var(--card-border-hover-color);
  }
}

@mixin flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin override-anchor() {
  &,
  &:focus,
  &:hover,
  &:active &:link,
  &:visited {
    text-decoration: none;
    @content;
  }
}

@mixin text-ellipsis($lines: 1) {
  overflow: hidden;

  @if ($lines ==1) {
    white-space: nowrap;
    text-overflow: ellipsis;
  } @else {
    // Ellipsis on second line
    // See: https://css-tricks.com/almanac/properties/l/line-clamp/
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

@mixin state-checked($id) {
  ##{$id}-state:checked + [data-#{$id}-state-container] {
    @content;
  }
}

@mixin scrollbar-v {
  $track-width: 4px;

  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) transparent;

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: $track-width;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: $track-width;
  }
}
