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

Effect v1

————————————*/ @import “icon-hover-extend”;

.u-icon-effect-v1-1–hover, .u-icon-effect-v1-2–hover {

position: relative;
overflow: inherit;

}

.u-icon-effect-v1-1–hover::after, .u-icon-effect-v1-2–hover::after {

@extend %u-icon-hover-effect-after;
@include px-to-rem(top, -7px);
@include px-to-rem(left, -7px);
@include px-to-rem(padding, 7px);
box-shadow: 0 0 0 1px $g-color-primary;
transition: all .2s ease-in-out;
opacity: 0;

}

.u-icon-effect-v1-1–hover:hover, .u-icon-effect-v1-2–hover:hover, .u-icon-v4.u-icon-effect-v1-1–hover:hover .u-icon-v4-inner, .u-icon-v4.u-icon-effect-v1-2–hover:hover .u-icon-v4-inner, .u-icon-block–hover:hover .u-icon-effect-v1-1–hover, .u-icon-block–hover:hover .u-icon-effect-v1-2–hover, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-1–hover .u-icon-v4-inner, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-2–hover .u-icon-v4-inner {

color: $g-color-white;
border-color: $g-color-primary;
background: $g-color-primary !important;

}

.u-icon-v4.u-icon-effect-v1-1–hover:hover, .u-icon-v4.u-icon-effect-v1-2–hover:hover, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-1–hover, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-2–hover {

border-color: transparent;

}

// Effect v1-1 .u-icon-effect-v1-1–hover::after {

transform: scale(.8);

}

.u-icon-effect-v1-1–hover:hover::after, .u-icon-block–hover:hover .u-icon-effect-v1-1–hover::after {

transform: scale(1);
opacity: 1;

}

// Effect v1-2 .u-icon-effect-v1-2–hover::after {

transform: scale(1.2);

}

.u-icon-effect-v1-2–hover:hover::after, .u-icon-block–hover:hover .u-icon-effect-v1-2–hover::after {

transform: scale(1);
opacity: 1;

}

.u-icon-v4.u-icon-effect-v1-2–hover:hover::after, .u-icon-block–hover:hover .u-icon-v4.u-icon-effect-v1-2–hover::after {

transform: scale(.8);

}