@define-mixin anim-img-overexposure {
  &:hover {
    animation: var(--kf-overexposure) var(--img-overexposure-timing);
  }
}

@define-mixin anim-img-contrastslam {
  &:hover {
    filter: grayscale(var(--base-grayscale)) contrast(var(--contrast-amount)) brightness(var(--brightness-amount));
    transition: filter var(--img-contrastslam-duration) var(--img-contrastslam-timing);
  }
}

@define-mixin anim-img-colorbleed {
  &:hover {
    animation: var(--kf-color-bleed) var(--img-colorbleed-duration) var(--img-colorbleed-timing);
  }
}

@define-mixin anim-img-filmburn {
  &:hover {
    animation: var(--kf-film-burn) var(--img-filmburn-duration) var(--img-filmburn-timing);
  }
}

@define-mixin anim-img-malfunction {
  &:hover {
    animation: var(--kf-malfunction) var(--img-malfunction-duration) var(--img-malfunction-timing);
  }
}

@define-mixin anim-img-tonerstarvation {
  &:hover {
    animation: var(--kf-toner-fade) var(--img-tonerstarvation-duration) var(--img-tonerstarvation-timing);
  }
}

@define-mixin anim-img-corruption {
  &:hover {
    animation: var(--kf-digital-corrupt) var(--img-corruption-duration) var(--img-corruption-timing);
  }
}

@define-mixin anim-img-starkflash {
  &:hover {
    animation: var(--kf-stark-flash) var(--img-starkflash-duration) var(--img-starkflash-timing);
  }
}

/* === TEXT ANIMATION MIXINS === */

@define-mixin anim-txt-strikethrough-marker {
  position: relative;

  &::after {
    content: '';

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    width: 0%;
    height: 1px;
    border: 0 solid var(--strike-color);
    border-radius: var(--strike-radius);
    border-bottom-right-radius: 16px;

    background: var(--strike-color);

    transition: width var(--strike-duration) var(--strike-timing), border-width var(--strike-duration) var(--strike-timing);

    corner-shape: bevel;
  }

  &:hover::after {
    width: 100%;
    border-width: var(--strike-border-width);
  }
}

@define-mixin anim-txt-strikethrough-industrial {
  position: relative;

  &:hover::after {
    content: '';

    position: absolute;
    top: 50%;
    right: -0.125em;
    left: -0.125em;
    transform: translateY(-50%);

    height: var(--strike-height);

    background: var(--strike-color);

    animation: var(--kf-strike-slam) var(--strike-duration) var(--strike-timing);
  }
}

@define-mixin anim-txt-markerhighlight {
  background: linear-gradient(to right, var(--marker-bg) 0%, var(--marker-bg) 0%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--marker-duration) var(--marker-timing) , color var(--marker-duration) var(--marker-timing) ;

  &:hover {
    color: var(--marker-fg);
    background-size: 100% 100%;
  }
}

@define-mixin anim-txt-labelmaker {
  transition: all var(--label-duration) var(--label-timing);

  &:hover {
    margin: var(--label-margin);
    padding: var(--label-padding);
    border: var(--label-border-width) solid var(--label-bg);

    font-weight: var(--label-weight);
    color: var(--label-fg);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-spacing);

    background: var(--label-bg);
    box-shadow: var(--label-shadow-offset) 0 var(--label-shadow-color);
  }
}

@define-mixin anim-txt-rubberstamp {
  transition: all var(--stamp-duration) var(--stamp-timing);

  &:hover {
    transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale)) translateY(var(--stamp-translate));

    margin: var(--stamp-margin);
    padding: var(--stamp-padding);
    border: var(--stamp-border-width) solid var(--stamp-bg);

    font-weight: var(--stamp-weight);
    color: var(--stamp-fg);
    text-transform: var(--stamp-transform);
    letter-spacing: var(--stamp-spacing);

    background: var(--stamp-bg);
    box-shadow: inset 0 0 0 2px var(--stamp-fg), var(--stamp-shadow-offset) 0 var(--stamp-shadow-color);
  }
}

@define-mixin anim-txt-pressstamp {
  transition: all var(--press-duration) var(--press-timing);

  &:hover {
    transform: scaleY(var(--press-scale-y)) scaleX(var(--press-scale-x)) translateY(var(--press-translate));

    margin: var(--press-margin);
    padding: var(--press-padding);

    font-weight: var(--press-weight);
    color: var(--press-fg);
    letter-spacing: var(--press-spacing);

    background: var(--press-bg);
    box-shadow: 0 0 0 1px var(--press-border-color), 0 2px 0 var(--press-shadow-1), 0 4px 0 var(--press-shadow-2);
  }
}

@define-mixin anim-txt-typewriter {
  position: relative;

  &::after {
    content: '';

    position: absolute;
    bottom: var(--typewriter-offset);
    left: 0;

    width: 0%;
    height: var(--typewriter-height);

    background: repeating-linear-gradient(to right, var(--typewriter-color) 0, var(--typewriter-color) var(--typewriter-dash-length), transparent var(--typewriter-dash-length), transparent var(--typewriter-gap-length));

    transition: width var(--typewriter-duration) var(--typewriter-timing);
  }

  &:hover::after {
    width: 100%;
  }
}

@define-mixin anim-txt-hardinvert {
  transition: all var(--invert-duration) var(--invert-timing);

  &:hover {
    transform: scale(var(--invert-scale));

    font-weight: var(--invert-weight);
    color: var(--invert-fg);
    letter-spacing: var(--invert-spacing);

    background: var(--invert-bg);
  }
}

@define-mixin anim-txt-pointer {
  position: relative;

  &::before,
  &::after {
    position: absolute;
    color: var(--pointer-color);
    opacity: 0;
    transition: var(--pointer-transition);
  }

  &::before {
    content: var(--pointer-left-symbol);
    left: 0;
  }

  &::after {
    content: var(--pointer-right-symbol);
    right: 0;
  }

  &:hover::before {
    transform: translateX(calc(var(--pointer-distance) * -1));
    opacity: 1;
  }

  &:hover::after {
    transform: translateX(var(--pointer-distance));
    opacity: 1;
  }
}

@define-mixin anim-txt-cornerbox {
  position: relative;
  margin: var(--corner-margin);
  padding: var(--corner-padding);

  &::before,
  &::after {
    content: '';

    position: absolute;

    width: var(--corner-size);
    height: var(--corner-size);
    border: var(--corner-border);

    opacity: 0;

    transition: var(--corner-transition);
  }

  &::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
  }

  &::after {
    right: 0;
    bottom: 0;
    border-top: none;
    border-left: none;
  }

  &:hover {
    &::before,
    &::after {
      opacity: 1;
    }
  }
}

@define-mixin anim-txt-characterglitch {
  &:hover {
    animation: var(--kf-char-scramble) var(--glitch-duration) var(--glitch-timing);
  }
}

@define-mixin anim-txt-pixelshift {
  position: relative;

  &::before {
    content: '';

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: var(--pixel-line-height);

    opacity: 0;
    background: var(--pixel-bg);
  }

  &:hover {
    color: var(--pixel-fg);
    animation: var(--kf-text-glitch) var(--pixel-duration) var(--pixel-timing);

    &::before {
      opacity: 1;
      animation: var(--kf-glitch-line) var(--pixel-duration) var(--pixel-timing);
    }
  }
}

@define-mixin anim-txt-redacted {
  transition: all var(--redacted-duration) var(--redacted-timing);

  &::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background: var(--redacted-bg);

    transition: width var(--redacted-duration) var(--redacted-timing);
  }

  &:hover {
    color: transparent;
    text-shadow: var(--redacted-shadow);

    &::after {
      width: 100%;
    }
  }
}

@define-mixin anim-txt-xray {
  transition: all var(--xray-duration) var(--xray-timing);

  &:hover {
    font-weight: var(--xray-weight);
    color: var(--xray-fg);
    text-shadow: 0 0 2px var(--xray-glow);

    background: var(--xray-bg);
    filter: invert(var(--xray-invert)) contrast(var(--xray-contrast)) brightness(var(--xray-brightness)) saturate(var(--xray-saturate));
    box-shadow: inset 0 0 0 1px var(--xray-border), 0 0 15px var(--xray-outer-glow);
  }
}

@define-mixin anim-txt-strikethrough-marker_focus {
  position: relative;

  &::after {
    content: '';

    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    width: 0%;
    height: 1px;
    border: 0 solid var(--strike-color);
    border-radius: var(--strike-radius);
    border-bottom-right-radius: 16px;

    background: var(--strike-color);

    transition: width var(--strike-duration) var(--strike-timing), border-width var(--strike-duration) var(--strike-timing);

    corner-shape: bevel;
  }

  &:focus::after {
    width: 100%;
    border-width: var(--strike-border-width);
  }
}

@define-mixin anim-txt-strikethrough-industrial_focus {
  position: relative;

  &:focus::after {
    content: '';

    position: absolute;
    top: 50%;
    right: -0.125em;
    left: -0.125em;
    transform: translateY(-50%);

    height: var(--strike-height);

    background: var(--strike-color);

    animation: var(--kf-strike-slam) var(--strike-duration) var(--strike-timing);
  }
}

@define-mixin anim-txt-markerhighlight_focus {
  background: linear-gradient(to right, var(--marker-bg) 0%, var(--marker-bg) 0%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size var(--marker-duration) var(--marker-timing) , color var(--marker-duration) var(--marker-timing) ;

  &:focus {
    color: var(--marker-fg);
    background-size: 100% 100%;
  }
}

@define-mixin anim-txt-labelmaker_focus {
  transition: all var(--label-duration) var(--label-timing);

  &:focus {
    margin: var(--label-margin);
    padding: var(--label-padding);
    border: var(--label-border-width) solid var(--label-bg);

    font-weight: var(--label-weight);
    color: var(--label-fg);
    text-transform: var(--label-transform);
    letter-spacing: var(--label-spacing);

    background: var(--label-bg);
    box-shadow: var(--label-shadow-offset) 0 var(--label-shadow-color);
  }
}

@define-mixin anim-txt-rubberstamp_focus {
  transition: all var(--stamp-duration) var(--stamp-timing);

  &:focus {
    transform: rotate(var(--stamp-rotate)) scale(var(--stamp-scale)) translateY(var(--stamp-translate));

    margin: var(--stamp-margin);
    padding: var(--stamp-padding);
    border: var(--stamp-border-width) solid var(--stamp-bg);

    font-weight: var(--stamp-weight);
    color: var(--stamp-fg);
    text-transform: var(--stamp-transform);
    letter-spacing: var(--stamp-spacing);

    background: var(--stamp-bg);
    box-shadow: inset 0 0 0 2px var(--stamp-fg), var(--stamp-shadow-offset) 0 var(--stamp-shadow-color);
  }
}

@define-mixin anim-txt-pressstamp_focus {
  transition: all var(--press-duration) var(--press-timing);

  &:focus {
    transform: scaleY(var(--press-scale-y)) scaleX(var(--press-scale-x)) translateY(var(--press-translate));

    margin: var(--press-margin);
    padding: var(--press-padding);

    font-weight: var(--press-weight);
    color: var(--press-fg);
    letter-spacing: var(--press-spacing);

    background: var(--press-bg);
    box-shadow: 0 0 0 1px var(--press-border-color), 0 2px 0 var(--press-shadow-1), 0 4px 0 var(--press-shadow-2);
  }
}

@define-mixin anim-txt-typewriter_focus {
  position: relative;

  &::after {
    content: '';

    position: absolute;
    bottom: var(--typewriter-offset);
    left: 0;

    width: 0%;
    height: var(--typewriter-height);

    background: repeating-linear-gradient(to right, var(--typewriter-color) 0, var(--typewriter-color) var(--typewriter-dash-length), transparent var(--typewriter-dash-length), transparent var(--typewriter-gap-length));

    transition: width var(--typewriter-duration) var(--typewriter-timing);
  }

  &:focus::after {
    width: 100%;
  }
}

@define-mixin anim-txt-hardinvert_focus {
  transition: all var(--invert-duration) var(--invert-timing);

  &:focus {
    transform: scale(var(--invert-scale));

    font-weight: var(--invert-weight);
    color: var(--invert-fg);
    letter-spacing: var(--invert-spacing);

    background: var(--invert-bg);
  }
}

@define-mixin anim-txt-pointer_focus {
  position: relative;

  &::before,
  &::after {
    position: absolute;
    color: var(--pointer-color);
    opacity: 0;
    transition: var(--pointer-transition);
  }

  &::before {
    content: var(--pointer-left-symbol);
    left: 0;
  }

  &::after {
    content: var(--pointer-right-symbol);
    right: 0;
  }

  &:focus::before {
    transform: translateX(calc(var(--pointer-distance) * -1));
    opacity: 1;
  }

  &:focus::after {
    transform: translateX(var(--pointer-distance));
    opacity: 1;
  }
}

@define-mixin anim-txt-cornerbox_focus {
  position: relative;
  margin: var(--corner-margin);
  padding: var(--corner-padding);

  &::before,
  &::after {
    content: '';

    position: absolute;

    width: var(--corner-size);
    height: var(--corner-size);
    border: var(--corner-border);

    opacity: 0;

    transition: var(--corner-transition);
  }

  &::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
  }

  &::after {
    right: 0;
    bottom: 0;
    border-top: none;
    border-left: none;
  }

  &:focus {
    &::before,
    &::after {
      opacity: 1;
    }
  }
}

@define-mixin anim-txt-characterglitch_focus {
  &:focus {
    animation: var(--kf-char-scramble) var(--glitch-duration) var(--glitch-timing);
  }
}

@define-mixin anim-txt-pixelshift {
  position: relative;

  &::before {
    content: '';

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: var(--pixel-line-height);

    opacity: 0;
    background: var(--pixel-bg);
  }

  &:hover {
    color: var(--pixel-fg);
    animation: var(--kf-text-glitch) var(--pixel-duration) var(--pixel-timing);

    &::before {
      opacity: 1;
      animation: var(--kf-glitch-line) var(--pixel-duration) var(--pixel-timing);
    }
  }
}

@define-mixin anim-txt-pixelshift_focus {
  position: relative;

  &::before {
    content: '';

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: var(--pixel-line-height);

    opacity: 0;
    background: var(--pixel-bg);
  }

  &:focus {
    color: var(--pixel-fg);
    animation: var(--kf-text-glitch) var(--pixel-duration) var(--pixel-timing);

    &::before {
      opacity: 1;
      animation: var(--kf-glitch-line) var(--pixel-duration) var(--pixel-timing);
    }
  }
}

@define-mixin anim-txt-redacted_focus {
  transition: all var(--redacted-duration) var(--redacted-timing);

  &::after {
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 0%;
    height: 100%;

    background: var(--redacted-bg);

    transition: width var(--redacted-duration) var(--redacted-timing);
  }

  &:focus {
    color: transparent;
    text-shadow: var(--redacted-shadow);

    &::after {
      width: 100%;
    }
  }
}

@define-mixin anim-txt-xray_focus {
  transition: all var(--xray-duration) var(--xray-timing);

  &:focus {
    font-weight: var(--xray-weight);
    color: var(--xray-fg);
    text-shadow: 0 0 2px var(--xray-glow);

    background: var(--xray-bg);
    filter: invert(var(--xray-invert)) contrast(var(--xray-contrast)) brightness(var(--xray-brightness)) saturate(var(--xray-saturate));
    box-shadow: inset 0 0 0 1px var(--xray-border), 0 0 15px var(--xray-outer-glow);
  }
}
