tabler/core/scss/mixins/_mixins.scss

@use 'sass:list';
@use 'sass:meta';
@use '../settings' as *;
@use '../variables' as *;
@use 'functions' as *;
@use 'bootstrap/transition' as *;
@use 'bootstrap/border-radius' as *;

@mixin subheader($include-color: true, $include-line-height: true) {
  font-size: $h5-font-size;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;

  @if $include-line-height {
    line-height: $h5-line-height;
  }

  @if ($include-color) {
    color: var(--secondary);
  }
}

@mixin scrollbar {
  $selector: if(sass(meta.type-of(&) != 'null'): '&'; else: '*');
  #{$selector} {
    scrollbar-color: color-transparent(var(--scrollbar-color, var(--body-color)), 0.2) transparent;
  }

  #{$selector}::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
    @include transition(background $transition-time);
  }

  #{$selector}::-webkit-scrollbar-thumb {
    @include border-radius(1rem);
    border: 5px solid transparent;
    box-shadow: inset 0 0 0 1rem color-transparent(var(--scrollbar-color, var(--body-color)), 0.2);
  }

  #{$selector}::-webkit-scrollbar-track {
    background: transparent;
  }

  #{$selector}:hover::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 0 1rem color-transparent(var(--scrollbar-color, var(--body-color)), 0.4);
  }

  #{$selector}::-webkit-scrollbar-corner {
    background: transparent;
  }
}

@mixin autodark-image {
  filter: brightness(0) invert(1);
}

//
// Elements list
//
@mixin elements-list($gap: 0.5rem) {
  --list-gap: #{$gap};
  display: flex;
  flex-wrap: wrap;
  gap: var(--list-gap);
}

// `--focus-ring` is not set by default: composed on `:root` it would freeze the
// width and the colour there, and an override on a component would not reach
// the ring. Set it to replace the whole outline at once.
//
// deprecated(2.0): `$show-border` is the 1.5 name of the first parameter. It
// tinted the border under the ring; drawing the ring over the border is what
// `$offset` does, so the old argument keeps its place and feeds it.
@mixin focus-ring($show-border: false, $color: null, $offset: $show-border) {
  @if $color != null {
    outline: var(--focus-ring-width) solid #{$color};
  } @else {
    outline: var(--focus-ring, var(--focus-ring-width) solid var(--focus-ring-color));
  }
  @if $offset {
    outline-offset: var(--focus-ring-offset);
  }
}

// Fades the focus ring in: `outline-color` starts from transparent instead of
// `currentcolor`. `transition` is one property, so pass the element's other
// transitions here instead of a second `transition()` call.
@mixin focus-ring-transition($transitions...) {
  outline-color: transparent;
  @include transition(list.append($transitions, $focus-ring-transition, comma)...);
}

//
// Print styles
//
// Renders an svg icon through a CSS mask so the shape is painted with the
// element's `background-color` and follows the theme without a colour baked
// into the data uri. Set `background-color` on the element; pass `null` for
// `$icon` when the mask image is applied per state.
@mixin mask-icon($icon: null, $size: contain, $position: center) {
  @if $icon != null {
    mask-image: $icon;
  }
  mask-repeat: no-repeat;
  @if $position != null {
    mask-position: $position;
  }
  @if $size != null {
    mask-size: $size;
  }
}

@mixin media-print {
  @media print {
    @content;
  }
}

// `$input-height` and its sizes as a token: the `:root` scale's min height
// (`--btn-input-min-height`) while the input metrics keep their defaults, the
// configured Sass value otherwise. Elements that sit next to a control (an icon
// addon, a select-group tile, an otp slot) match its height through it.
@function input-height-token($size: null) {
  @if $size == 'sm' {
    $default: add($input-btn-line-height-sm, add(calc($input-btn-padding-y-sm * 2), calc(#{$input-btn-border-width} * 2), false));
    @return if(sass($input-height-sm == $default): var(--btn-input-sm-min-height); else: $input-height-sm);
  }
  @if $size == 'lg' {
    $default: add($input-btn-line-height-lg, add(calc($input-btn-padding-y-lg * 2), calc(#{$input-btn-border-width} * 2), false));
    @return if(sass($input-height-lg == $default): var(--btn-input-lg-min-height); else: $input-height-lg);
  }
  $default: add($input-btn-line-height, add(calc($input-btn-padding-y * 2), calc(#{$input-btn-border-width} * 2), false));
  @return if(sass($input-height == $default): var(--btn-input-min-height); else: $input-height);
}