lbry-desktop/web/scss/init/_mixins.scss

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

@mixin breakpoint-max($breakpoint) {
  @media (max-width: #{$breakpoint}px) {
    @content;
  }
}

@mixin breakpoint-min($breakpoint) {
  @media (min-width: #{$breakpoint}px) {
    @content;
  }
}

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

@mixin clearfix {
  clear: both;
  content: '';
  display: block;
}

// (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;
  }

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

@mixin create-grid($items-per-row: 4) {
  grid-template: repeat(1, 1fr) / repeat($items-per-row, 1fr);
}

// Smart font include
// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
// No more weighing down the front-end with references to unused weights
@mixin font-face($font-weight, $relative-font-path, $font-name) {
  @font-face {
    font-family: $font-name;
    font-style: normal;
    font-weight: $font-weight;
    // sass-lint:disable indentation
    src: url('#{$relative-font-path}/#{$font-weight}.woff2') format('woff2'),
      url('#{$relative-font-path}/#{$font-weight}.woff') format('woff');
    // sass-lint:enable indentation
  }

  @font-face {
    font-family: $font-name;
    font-style: italic;
    font-weight: $font-weight;
    // sass-lint:disable indentation
    src: url('#{$relative-font-path}/#{$font-weight}i.woff2') format('woff2'),
      url('#{$relative-font-path}/#{$font-weight}i.woff') format('woff');
    // sass-lint:enable indentation
  }
}

@mixin font-mono {
  font-family: 'Fira Code', 'Courier New', monospace;
}

@mixin font-sans {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

@mixin font-serif {
  font-family: Georgia, serif;
}

@mixin hide-text {
  border: none;
  color: transparent;
  font: 0 / 0 a;
  text-shadow: none;
}

// Cross-browser line-clamp support
@mixin line-clamp($element-height: 2rem, $row-count: 2, $fade-color: var(--lbry-white), $computed-position: relative) {
  height: $element-height;
  overflow: hidden;
  position: $computed-position;

  &::after {
    width: 50%;
    height: calc(#{$element-height} / #{$row-count});
    right: 0;
    bottom: 0;

    background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
    content: '';
    position: absolute;
  }
}

@mixin no-user-select {
  user-select: none;

  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

// 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 selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
  &::selection {
    background-color: $background-color;
    color: $text-color;
    text-shadow: none;
  }

  &::-moz-selection {
    background-color: $background-color;
    color: $text-color;
    text-shadow: none;
  }
}

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

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

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

@mixin focus {
  box-shadow: 0 0 0 3px var(--color-focus);
}

@mixin linkFocus {
  background-color: var(--color-link-focus-bg);
  box-shadow: 0 0 0 5px var(--color-link-focus-bg);
}

@mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
  @include selection($text-color, $whitespace-color);

  background-image: linear-gradient($whitespace-color, $whitespace-color),
    linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
  background-position: 0 88%, 100% 88%, 0 88%;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
  box-decoration-break: clone;
  display: inline;
  text-decoration: none;
  text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color,
    0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color,
    -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color,
    -0.15rem 0 $whitespace-color;

  @-moz-document url-prefix() {
    // sass-lint:disable-line empty-args
    background-position: 0 90%, 100% 90%, 0 90%;
  }
}

@mixin placeholder {
  animation: pulse 2s infinite ease-in-out;
  background-color: var(--color-placeholder-background);
  border-radius: var(--card-radius);
  border-width: 0;
}

@mixin mediaThumbHoverZoom {
  .media__thumb,
  img {
    transition: all 0.2s ease;
  }

  &:hover {
    .media__thumb,
    img {
      transform: scale(1.05);
    }
  }
}

@mixin handleClaimTileGifThumbnail($width) {
  .ff-canvas,
  .freezeframe-img {
    height: calc(#{$width} * (9 / 16)) !important;
    width: $width;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@mixin handleClaimListGifThumbnail($width) {
  .ff-canvas,
  .freezeframe-img {
    height: calc(#{$width} * (9 / 16)) !important;
    width: $width;
  }
}

@mixin handleChannelGif($size) {
  height: $size;
  width: $size;

  .ff-canvas,
  .freezeframe-img {
    border-radius: var(--border-radius);
    height: $size !important;
    width: $size !important;
  }
}