// Rotated & Flipped Icons
// -------------------------

.#{$lk-css-prefix}-rotate-90  { transform: rotate(90deg); }
.#{$lk-css-prefix}-rotate-180 { transform: rotate(180deg); }
.#{$lk-css-prefix}-rotate-270 { transform: rotate(270deg); }

.#{$lk-css-prefix}-flip-horizontal { transform: scale(-1, 1); }
.#{$lk-css-prefix}-flip-vertical   { transform: scale(1, -1); }
.#{$lk-css-prefix}-flip-both,
.#{$lk-css-prefix}-flip-horizontal.#{$lk-css-prefix}-flip-vertical {
  transform: scale(-1, -1);
}

// Animated Icons
// --------------------------

.#{$lk-css-prefix}-spin {
  animation: lk-spin 2s infinite linear;
}

.#{$lk-css-prefix}-pulse {
  animation: lk-spin 1s infinite steps(8);
}

.#{$lk-css-prefix}-grow {
  opacity: 0;
  animation: lk-grow 1s linear infinite;
}

.#{$lk-css-prefix}-glow {
  animation: lk-glow 3s linear infinite;
}

@keyframes lk-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lk-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}


@keyframes lk-glow {
  0% {
    filter: drop-shadow(0 0 0 currentColor);
  }
  50% {
    filter: drop-shadow(0 0 3px currentColor);
  }
}

// Stacked Icons
// -------------------------

.#{$lk-css-prefix}-stack {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.#{$lk-css-prefix}-stack-1x,
.#{$lk-css-prefix}-stack-2x {
  position: absolute;
  text-align: center;
}

.#{$lk-css-prefix}-stack-1x {
  line-height: inherit;
}

.#{$lk-css-prefix}-stack-2x {
  font-size: 2em;
}

/* Colors */
.#{$lk-css-prefix}, .#{$lk-css-prefix}s, .#{$lk-css-prefix}c,
.#{$lk-css-prefix}r, .#{$lk-css-prefix}l, .#{$lk-css-prefix}d,
.#{$lk-css-prefix}b {
  &.#{$lk-css-prefix}-inverse::before {
    filter: invert(1);
  }

  &.#{$lk-css-prefix}-white::before {
    color: white;
  }
}

/* Shape & border */

/* Border */
.#{$lk-css-prefix}-border {
  border: solid .08em currentColor;
  border-radius: .1em;
  padding: .2em .25em .15em;
}

.#{$lk-css-prefix}-rounded {
  border-radius: .25em;
}

.#{$lk-css-prefix}-shape-square,
.#{$lk-css-prefix}-shape-diamond,
.#{$lk-css-prefix}-shape-circle {
    padding: .5em;
    border-width: .2em;
    border-style: solid;
    border-color: currentColor;
    height: var(--square);
    width: var(--square);
    align-items: center;
    justify-content: center;
}

.#{$lk-css-prefix}-shape-circle {
  border-radius: 50% !important;
}

.#{$lk-css-prefix}-shape-square,
.#{$lk-css-prefix}-shape-diamond {
  &:not(.#{$lk-css-prefix}-rounded) {
    border-radius: 0 !important;
  }
}

.#{$lk-css-prefix}-shape-square,
.#{$lk-css-prefix}-shape-diamond,
.#{$lk-css-prefix}-shape-circle {
  &:not(.#{$lk-css-prefix}-border) {
    padding: .7em;
    border: none;
    background: currentColor;
  }
}

.#{$lk-css-prefix}-shape-diamond {
  padding: .3em;
  transform: rotate(45deg);
  margin: 0 .4em;

  &:not(.#{$lk-css-prefix}-border) {
    padding: .5em;
  }

  &::before {
    transform: rotate(-45deg);
  }
}

.#{$lk-css-prefix}-shape-hexagon {
  position: relative;
  width: 2.75em;
  height: 2.75em;
  vertical-align: -1.125em;

  &::before {
    position: absolute;
    left: calc(50% - var(--width) / 2);
    top: calc(50% - .5em);
    z-index: 1;
  }

  &::after {
    --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M29.775 1.28L47.87 11.726a5.434 5.434 0 012.717 4.706V37.33a5.434 5.434 0 01-2.717 4.706L29.775 52.483a5.434 5.434 0 01-5.434 0L6.245 42.036a5.434 5.434 0 01-2.718-4.706V16.433a5.434 5.434 0 012.718-4.706L24.34 1.279a5.434 5.434 0 015.434 0z"/></svg>');
    content: '';
    background-color: currentColor;
    display: inline-block;
    line-height: 1;
    mask-image: var(--icon);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 2.75em;
    height: 2.75em;
    -webkit-mask-image: var(--icon);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    position: absolute;
    left: calc(50% - 1.375em);
    top: calc(50% - 1.375em);
  }

  &:not(.#{$lk-css-prefix}-rounded)::after {
    --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M27.105 53.425L3.63 40.225l-.084-26.54L26.937.344l23.476 13.199.084 26.54z"/></svg>');
  }

  &.#{$lk-css-prefix}-border {
    padding: 0;
    border: none;

    &::after {
      --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M27.006.146a6.72 6.72 0 00-3.361.899L6.262 11.082a6.728 6.728 0 00-3.362 5.82v20.075a6.728 6.728 0 003.362 5.82l17.383 10.037a6.727 6.727 0 006.72 0L47.75 42.797a6.726 6.726 0 003.36-5.82V16.902a6.726 6.726 0 00-3.36-5.82L30.365 1.045a6.713 6.713 0 00-3.36-.899zm0 2.999c.642 0 1.283.165 1.86.498L46.25 13.68a3.715 3.715 0 011.86 3.222v20.075a3.715 3.715 0 01-1.86 3.222L28.865 50.234a3.715 3.715 0 01-3.72 0L7.762 40.2A3.717 3.717 0 015.9 36.977V16.902c0-1.331.709-2.557 1.862-3.222L25.145 3.643a3.72 3.72 0 011.86-.498z"/></svg>');
    }

    &:not(.#{$lk-css-prefix}-rounded)::after {
      --icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><path d="M26.936.5L3.68 13.762l.085 26.386 23.34 13.125.923-.527L50.36 40.007l-.082-26.386zm.014 4.187l19.637 11.04.069 22.2L27.09 49.085 7.456 38.046l-.072-22.2z" /></svg>');
    }
  }
}