@mixin between {
  display: flex;
  justify-content: space-between;
}

// (Smart) text truncation
// Pass in a width to customize how much text is allowed
// Omit value for basic text truncation
@mixin constrict($value: null) {
  @if ($value) {
    max-width: $value; // 20vw
  }

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// TODO: Make customizable
// The `background-position` in `loading-animation` is the same width as this `background-size`
// The same values can be passed to both
@mixin placeholder {
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: loading-animation;
  animation-timing-function: linear;
  background-color: transparent;
  background-image: linear-gradient(to right, $lbry-gray-3 10%, transparent 80%, $lbry-gray-3 100%);
  background-repeat: repeat;
  background-size: 500px;

  [data-mode="dark"] & {
    background-image: linear-gradient(
      to right,
      rgba($lbry-white, 0.1) 10%,
      transparent 80%,
      rgba($lbry-white, 0.1) 100%
    );
  }
}

// Use CSS variables without upsetting Sass-Lint
// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
@mixin root-prop($prop: null, $value: null) {
  @if ($prop and $value) {
    #{$prop}: $value;
  }
}

@mixin thumbnail {
  &::before,
  &::after {
    content: "";
  }

  &::before {
    float: left;
    padding-top: var(--aspect-ratio-standard);
  }

  &::after {
    clear: both;
    display: block;
  }
}