.svg-icon {
  font-size: 0;
  line-height: 0;

  svg {
    width: 2.222vh;
    height: 2.222vh;
    use {
      fill: #fff;
    }
  }

  &.svg-icon-sm {
    line-height: 0;
    width: 1.481vh;
    height: 1.481vh;
    svg {
      width: 1.481vh;
      height: 1.481vh;
    }
  }

  &.svg-icon-md {
    line-height: 0;
    width: 2.222vh;
    height: 2.222vh;
    svg {
      width: 2.222vh;
      height: 2.222vh;
    }
  }

  &.svg-icon-lg {
    line-height: 0;
    width: 3.333vh;
    height: 3.333vh;
    svg {
      width: 3.333vh;
      height: 3.333vh;
    }
  }

  &.svg-icon-llg {
    line-height: 0;
    width: 4.444vh;
    height: 4.444vh;
    svg {
      width: 4.444vh;
      height: 4.444vh;
    }
  }

  &.svg-icon-gray {
    svg {
      use {
        fill: @gray;
      }
    }
    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @gray);
        }
      }
    }
  }
  &.svg-icon-gray-l {
    svg {
      use {
        fill: @gray-l;
      }
    }
    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @gray-l);
        }
      }
    }
  }
  &.svg-icon-green {
    svg {
      use {
        fill: @green;
      }
    }
    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @green);
        }
      }
    }
  }
  &.svg-icon-red {
    svg {
      use {
        fill: @red;
      }
    }
    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @red);
        }
      }
    }
  }
  &.svg-icon-blue {
    svg {
      use {
        fill: @darkBlue;
      }
    }
    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @darkBlue);
        }
      }
    }
  }
  &.svg-icon-darkblue {
    svg {
      use {
        fill: @darkBlue2;
      }
    }

    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @darkBlue2);
        }
      }
    }
  }

  &.svg-icon-yellow {
    svg {
      use {
        fill: @yellow;
      }
    }
    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @yellow);
        }
      }
    }
  }

  &.svg-icon-orange {
    svg {
      use {
        fill: @orange;
      }
    }

    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @orange);
        }
      }
    }
  }

  &.svg-icon-purple {
    svg {
      use {
        fill: @purple;
      }
    }

    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @purple);
        }
      }
    }
  }

  &.svg-icon-write {
    svg {
      use {
        fill: @write;
      }
    }

    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @write);
        }
      }
    }
  }

  &.svg-icon-black {
    svg {
      use {
        fill: @black;
      }
    }

    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @black);
        }
      }
    }
  }
  &.svg-icon-pink {
    svg {
      use {
        fill: @pink;
      }
    }

    &.svg-shadow {
      svg {
        use {
          filter: drop-shadow(0 0 6px @pink);
        }
      }
    }
  }

}
