/*------------------------------------
  Icon-v5
------------------------------------*/
@import "icons-sizes-vn";

.u-icon-v5 {
  @extend %u-icon-size;
  position: relative;

  body & {
    background: transparent !important; // increasing the specificity
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -.45em 0 0 -.4em;
    width: .8em;
    height: .8em;
    background-color: $g-color-gray-light-v4;
    border-radius: 50%;
    opacity: .7;
  }

  & i {
    position: relative;
    z-index: 2;
  }



  //
  // Sizes
  //

  &.u-icon-size--xs {
    @extend %u-icon-size--xs;
  }
  &.u-icon-size--sm {
    @extend %u-icon-size--sm;
  }
  &.u-icon-size--lg {
    @extend %u-icon-size--lg;
  }
  &.u-icon-size--xl {
    @extend %u-icon-size--xl;
  }
  &.u-icon-size--2xl {
    @extend %u-icon-size--2xl;
  }
  &.u-icon-size--3xl {
    @extend %u-icon-size--3xl;
  }



  //
  // Colors
  //

  &.g-bg-main::after {
    background-color: $g-color-main;
  }
  &.g-bg-primary::after {
    background-color: $g-color-primary;
  }
  &.g-bg-black::after {
    background-color: $g-color-black;
  }
  &.g-bg-white::after {
    background-color: $g-color-white;
  }
  &.g-bg-gray {
    &-light {
      &-v1::after {
        background-color: $g-color-gray-light-v1;
      }
      &-v2::after {
        background-color: $g-color-gray-light-v2;
      }
      &-v3::after {
        background-color: $g-color-gray-light-v3;
      }
      &-v4::after {
        background-color: $g-color-gray-light-v4;
      }
      &-v5::after {
        background-color: $g-color-gray-light-v5;
      }
    }
    &-dark {
      &-v1::after {
        background-color: $g-color-gray-dark-v1;
      }
      &-v2::after {
        background-color: $g-color-gray-dark-v2;
      }
      &-v3::after {
        background-color: $g-color-gray-dark-v3;
      }
      &-v4::after {
        background-color: $g-color-gray-dark-v4;
      }
      &-v5::after {
        background-color: $g-color-gray-dark-v5;
      }
    }
  }
  &.g-bg-green::after {
    background-color: $g-color-green;
  }
  &.g-bg-blue::after {
    background-color: $g-color-blue;
  }
  &.g-bg-lightblue::after {
    background-color: $g-color-lightblue;
  }
  &.g-bg-lightblue-v1::after {
    background-color: $g-color-lightblue-v1;
  }
  &.g-bg-darkblue::after {
    background-color: $g-color-darkblue;
  }
  &.g-bg-indigo::after {
    background-color: $g-color-indigo;
  }
  &.g-bg-red::after {
    background-color: $g-color-red;
  }
  &.g-bg-lightred::after {
    background-color: $g-color-lightred;
  }
  &.g-bg-darkred::after {
    background-color: $g-color-darkred;
  }
  &.g-bg-purple::after {
    background-color: $g-color-purple;
  }
  &.g-bg-darkpurple::after {
    background-color: $g-color-darkpurple;
  }
  &.g-bg-pink::after {
    background-color: $g-color-pink;
  }
  &.g-bg-orange::after {
    background-color: $g-color-orange;
  }
  &.g-bg-deeporange::after {
    background-color: $g-color-deeporange;
  }
  &.g-bg-yellow::after {
    background-color: $g-color-yellow;
  }
  &.g-bg-aqua::after {
    background-color: $g-color-aqua;
  }
  &.g-bg-cyan::after {
    background-color: $g-color-cyan;
  }
  &.g-bg-teal::after {
    background-color: $g-color-teal;
  }
  &.g-bg-brown::after {
    background-color: $g-color-brown;
  }
  &.g-bg-bluegray::after {
    background-color: $g-color-bluegray;
  }
}