@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);
}

@mixin focus-ring($show-border: false) {
  outline: 0;
  box-shadow:
    0 0 0 2px var(--primary),
    0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--primary), 0.25);

  @if ($show-border) {
    border-color: color-transparent(var(--primary), 0.25);
  }
}

//
// Print styles
//
@mixin media-print {
  @media print {
    @content;
  }
}