/*╔══════════════════════════════════════════════════╗
  ║                        Utilities                          ║
  ╚══════════════════════════════════════════════════╝*/

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Our custom logo styling

@mixin logo($A, $B, $C, $D) {
  #logo svg #ADDL-SIGNET {
    polygon.A {
      fill: $A;
    }

    polygon.B {
      fill: $B;
    }

    polygon.C {
      fill: $C;
    }

    polygon.D {
      fill: $D;
    }
  }
}

@mixin logo-hover($animation: logo-hover) {
  #logo:hover svg #ADDL-SIGNET {
    polygon {
      animation: $animation 0.6s ease-in-out 1 normal forwards;

      &:nth-child(1) {
        animation-delay: 0s;
      }

      &:nth-child(2) {
        animation-delay: 0.07s;
      }

      &:nth-child(3) {
        animation-delay: 0.14s;
      }

      &:nth-child(4) {
        animation-delay: 0.21s;
      }
    }
  }
}

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Center an element (parent must be relative)

@mixin center($xy: 0) {
  @if $xy == xy {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;

    transform: translateX(-50%) translateY(-50%);
  } @else if $xy == x {
    right: auto;
    left: 50%;

    transform: translateX(-50%);
  } @else if $xy == y {
    top: 50%;
    bottom: auto;

    transform: translateY(-50%);
  } @else if $xy == 0 {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    transform: translateX(0) translateY(0);
  }
}

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Make something as big as possible

@mixin fullscreen() {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Button events

@mixin button-events(
  $hover-border-color: var(--btn-hover),
  $hover-background: var(--btn-hover),
  $hover-color: false,
  $active-border-color: var(--btn-active),
  $active-background: var(--btn-active),
  $active-color: false,
  $shadow-color: false
) {
  &:focus {
    border-color: $active-border-color;

    outline: none;

    background-color: $active-background;

    @if $shadow-color {
      box-shadow: 0 0 0 3px $shadow-color;
    }

    @if $active-color {
      color: $active-color;
    }
  }

  &:hover {
    border-color: $hover-border-color;

    background-color: $hover-background;

    @if $hover-color {
      color: $hover-color;
    }
  }

  &:active {
    border-color: $active-border-color;

    outline: none;

    background-color: $active-background;

    @if $shadow-color {
      box-shadow: 0 0 0 3px $shadow-color;
    }

    @if $active-color {
      color: $active-color;
    }
  }
}

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Edit font rendering
// @tip: use for light text on dark backgrounds

@mixin fontSmooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
// Crop the line-height
// @see: https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f

@mixin lhCrop($line-height: var(--body-line-height), $capital-letter: 1) {
  &::before {
    display: block;
    width: 0;

    height: 0;
    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);

    content: "";
  }
}