.$(icon) {
  &-close {
    &::before,
    &::after {
      background: currentColor;
      transform: translate(-50%, -50%) rotate(45deg);
    }

    &::before {
      height: .0625rem;
      @apply w-full;
    }

    &::after {
      @apply h-full;
      width: .0625rem;
    }
  }

  &-search {
    &::before {
      @apply rounded-full;

      border: .0625rem solid currentColor;
      border-radius: 50%;
      height: .75em;
      left: 5%;
      top: 5%;
      transform: translate(0, 0) rotate(45deg);
      width: .75em;
    }

    &::after {
      background: currentColor;
      height: .0625rem;
      left: 80%;
      top: 80%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: .4em;
    }
  }

  &-menu {
    &::before {
      @apply w-full;

      background: currentColor;
      box-shadow: 0 -.35em, 0 .35em;
      height: .0625rem;
    }
  }

  &-check {
    &::before {
      @apply border-solid;
      border-color: currentColor;

      border-width: 0 0 .0625rem .0625rem;
      height: .5em;
      width: .9em;
      transform: translate(-50%, -90%) rotate(-45deg);
    }
  }

  &-arrow-down,
  &-arrow-left,
  &-arrow-right,
  &-arrow-up,
  &-chevron-up,
  &-chevron-right,
  &-chevron-down,
  &-chevron-left {
    &::before {
      border-color: currentColor;

      height: .65em;
      width: .65em;
      border-style: solid;
      border-width: .0625rem 0 0 .0625rem;
    }
  }

  &-arrow-left,
  &-arrow-right {
    &::after {
      background: currentColor;
      height: .0625rem;
      width: .8em;
    }
  }

  &-arrow-down,
  &-arrow-up {
    &::after {
      background: currentColor;
      height: .8em;
      width: .0625rem;
    }
  }

  &-arrow-left {
    &::before {
      left: 35%;
    }
  }

  &-arrow-up {
    &::before {
      top: 35%;
    }
  }

  &-arrow-down {
    &::before {
      top: 65%;
    }
  }

  &-arrow-right {
    &::before {
      left: 65%;
    }
  }

  &-arrow-left,
  &-chevron-left {
    &::before {
      transform: translate(-25%, -50%) rotate(-45deg);
    }
  }

  &-arrow-up,
  &-chevron-up {
    &::before {
      transform: translate(-50%, -25%) rotate(45deg);
    }
  }

  &-arrow-right,
  &-chevron-right {
    &::before {
      transform: translate(-75%, -50%) rotate(135deg);
    }
  }

  &-arrow-down,
  &-chevron-down {
    &::before {
      transform: translate(-50%, -75%) rotate(225deg);
    }
  }

  &-edit {
    &::before {
      border: .0625rem solid currentColor;
      height: .4em;
      transform: translate(-40%, -60%) rotate(-45deg);
      width: .85em;
    }

    &::after {
      @apply h-0;
      @apply w-0;

      border: .15em solid currentColor;
      border-top-color: transparent;
      border-right-color: transparent;
      left: 5%;
      top: 95%;
      transform: translate(0, -100%);
    }
  }

  &-mail {
    &::before {
      @apply rounded-sm;
      border: .0625rem solid currentColor;
      height: .8em;
      width: 1em;
    }

    &::after {
      border: .0625rem solid currentColor;
      border-right-color: transparent;
      border-top-color: transparent;
      height: .5em;
      transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
      width: .5em;
    }
  }

  &-attachment {
    &::before,
    &::after {
      @apply border-r-0;

      border: .0625rem solid currentColor;
      border-right-width: 0;
      border-radius: 5em 0 0 5em;
      height: .5em;
      width: .75em;
    }

    &::before {
      transform: translate(-70%, -45%) rotate(-45deg);
    }

    &::after {
      transform: translate(-30%, -55%) rotate(135deg);
    }
  }

  &-bookmark {
    &::before {
      @apply rounded-l-sm;
      @apply rounded-r-sm;

      border: .0625rem solid currentColor;
      border-bottom-color: transparent;
      height: .9em;
      width: .8em;
    }

    &::after {
      @apply rounded-sm;

      border: .0625rem solid currentColor;
      border-bottom-color: transparent;
      border-left-color: transparent;
      height: .5em;
      transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
      width: .5em;
    }
  }

  &-ellipsis,
  &-ellipsis-vertical {
    &::before {
      @apply rounded-full;
      height: .1875rem;
      width: .1875rem;

      background: currentColor;
      box-shadow: -.4em 0, .4em 0;
    }
  }

  &-ellipsis-vertical {
    &::before {
      box-shadow: 0 -.4em, 0 .4em;
    }
  }

  &-minus {
    &::before {
      @apply w-full;

      background: currentColor;
      height: .0625rem;
    }
  }

  &-plus {
    &::before {
      @apply w-full;

      background: currentColor;
      height: .0625rem;
    }

    &::after {
      @apply h-full;

      background: currentColor;
      width: .0625rem;
    }
  }
}