@charset "UTF-8";

@mixin hide($delay: 0s) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease $delay, visibility $delay ease 0.4s, transform 0.4s ease $delay;
}

@mixin show($delay: 0s) {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.4s ease $delay, visibility 0s ease $delay, transform 0.4s ease $delay;
}

@mixin fullsize {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@mixin focusvisible($inset: false) {
  @if $inset {
    &.focus-visible:focus {
      box-shadow: inset 0 0 0 2px $color-secondary-dark, inset 0 0 8px 2px lighten($color-secondary-dark, 20);
      box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed, $color-secondary-dark), inset 0 0 8px 2px var(--theme-color-secondary-intensed, lighten($color-secondary-dark, 20));
      outline: 0;
    }
    &:focus-visible, &.-moz-focusring {
      box-shadow: inset 0 0 0 2px $color-secondary-dark, inset 0 0 8px 2px lighten($color-secondary-dark, 20);
      box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed, $color-secondary-dark), inset 0 0 8px 2px var(--theme-color-secondary-intensed, lighten($color-secondary-dark, 20));
      outline: 0;
    }
  }
  @else {
    &.focus-visible:focus {
      box-shadow: 0 0 0 2px $color-secondary-dark, 0 0 8px 2px lighten($color-secondary-dark, 20);
      box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed, $color-secondary-dark), 0 0 8px 2px var(--theme-color-secondary-intensed, lighten($color-secondary-dark, 20));
      outline: 0;
    }
    &:focus-visible, &.-moz-focusring {
      box-shadow: 0 0 0 2px $color-secondary-dark, 0 0 8px 2px lighten($color-secondary-dark, 20);
      box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed, $color-secondary-dark), 0 0 8px 2px var(--theme-color-secondary-intensed, lighten($color-secondary-dark, 20));
      outline: 0;
    }
  }
}

@mixin focus-standalone($inset: false) {
  @if $inset {
    box-shadow: inset 0 0 0 2px $color-secondary-dark, inset 0 0 8px 2px lighten($color-secondary-dark, 20);
    box-shadow: inset 0 0 0 2px var(--theme-color-secondary-intensed, $color-secondary-dark), inset 0 0 8px 2px var(--theme-color-secondary-intensed, lighten($color-secondary-dark, 20));
    outline: 0;
  }
  @else {
    box-shadow: 0 0 0 2px $color-secondary-dark, 0 0 8px 2px lighten($color-secondary-dark, 20);
    box-shadow: 0 0 0 2px var(--theme-color-secondary-intensed, $color-secondary-dark), 0 0 8px 2px var(--theme-color-secondary-intensed, lighten($color-secondary-dark, 20));
    outline: 0;
  }
}

@mixin gradient($direction, $color1, $color2) {
  background: linear-gradient($direction, $color1 0%, $color2 100%);
}

@mixin sr-visible {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

@mixin font-small {
  font-size: 18px;
  line-height: 1.4;

  @media(max-width: 999px) {
    font-size: 16px;
  }
}