/*————————————

Icon-v4

————————————*/ @import “icons-sizes-vn”;

.u-icon-v4 {

@include px-to-rem(padding, 8px);
background: transparent !important;
border: solid 1px $g-color-gray-light-v4;
transition: all .1s ease-in-out;

&-inner {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: $g-color-gray-light-v4;
}

}

.u-icon-v4 .u-icon-v4-inner {

@extend %u-icon-size;
z-index: 1;
transition: all .2s ease-in-out;

}

// // Sizes //

.u-icon-v4 {

// Default (md)
& .u-icon__elem-regular,
& .u-icon__elem-hover {
  @extend %u-icon-size;
}

&.u-icon-size--xs &-inner,
&.u-icon-size--xs .u-icon__elem-regular,
&.u-icon-size--xs .u-icon__elem-hover {
  @extend %u-icon-size--xs;
}

&.u-icon-size--sm &-inner,
&.u-icon-size--sm .u-icon__elem-regular,
&.u-icon-size--sm .u-icon__elem-hover {
  @extend %u-icon-size--sm;
}

&.u-icon-size--lg &-inner,
&.u-icon-size--lg .u-icon__elem-regular,
&.u-icon-size--lg .u-icon__elem-hover {
  @extend %u-icon-size--lg;
}

&.u-icon-size--xl &-inner,
&.u-icon-size--xl .u-icon__elem-regular,
&.u-icon-size--xl .u-icon__elem-hover {
  @extend %u-icon-size--xl;
}

&.u-icon-size--2xl &-inner,
&.u-icon-size--2xl .u-icon__elem-regular,
&.u-icon-size--2xl .u-icon__elem-hover {
  @extend %u-icon-size--2xl;
}

&.u-icon-size--3xl &-inner,
&.u-icon-size--3xl .u-icon__elem-regular,
&.u-icon-size--3xl .u-icon__elem-hover {
  @extend %u-icon-size--3xl;
}

}

// // Border-radiuses //

.u-icon-v4 {

&-rounded-3,
&-rounded-3 &-inner {
  border-radius: 3px;
}

&-rounded-7,
&-rounded-7 &-inner {
  border-radius: 7px;
}

&-rounded-10,
&-rounded-10 &-inner {
  border-radius: 10px;
}

&-rounded-50x,
&-rounded-50x &-inner {
  border-radius: 50%;
}

}

// // Colors //

.u-icon-v4 {

&-bg-primary {
  border-color: $g-color-primary;

  .u-icon-v4-inner {
    background: $g-color-primary;
  }
}

&-bg-white {
  border-color: $g-color-white;

  .u-icon-v4-inner {
    background: $g-color-white;
  }
}

&-bg-gray-light-v3 {
  border-color: $g-color-gray-light-v3;

  .u-icon-v4-inner {
    background: $g-color-gray-light-v3;
  }
}

&-bg-gray-dark-v3 {
  border-color: $g-color-gray-dark-v3;

  .u-icon-v4-inner {
    background: $g-color-gray-dark-v3;
  }
}

&-bg-black {
  border-color: $g-color-black;

  .u-icon-v4-inner {
    background: $g-color-black;
  }
}

//
// Hover Effects
//

// Primary color
&-bg-primary--hover:hover,
.u-icon-block--hover:hover &-bg-primary--hover {
  border-color: $g-color-primary;

  & .u-icon-v4-inner {
    background: $g-color-primary;
  }
}

// White color
&-bg-white--hover:hover,
.u-icon-block--hover:hover &-bg-white--hover {
  border-color: $g-color-white;

  & .u-icon-v4-inner {
    background: $g-color-white;
  }
}

// Gray-light-v3 color
&-bg-gray-light-v3--hover:hover,
.u-icon-block--hover:hover &-bg-gray-light-v3--hover {
  border-color: $g-color-gray-light-v3;

  & .u-icon-v4-inner {
    background: $g-color-gray-light-v3;
  }
}

// Gray-dark-v3 color
&-bg-gray-dark-v3--hover:hover,
.u-icon-block--hover:hover &-bg-gray-dark-v3--hover {
  border-color: $g-color-gray-dark-v3;

  & .u-icon-v4-inner {
    background: $g-color-gray-dark-v3;
  }
}

// Black color
&-bg-black--hover:hover,
.u-icon-block--hover:hover &-bg-black--hover {
  border-color: $g-color-black;

  & .u-icon-v4-inner {
    background: $g-color-black;
  }
}

} @import “icon-v4-additional-colors”; @import “icon-v4-social-colors”; @import “icon-v4-gradients”;