@charset "UTF-8";
@import "../theme/variables";
@import "~@jereation/sass-helpers/_mixins";

.vui-icon {
  color: map-get($icon, color);
  .fa {
    color: map-get($icon, color);
  }
}

.fa-angle-left {
  font-size: 1.2rem * $rem-ratio;
  vertical-align: -.12rem * $rem-ratio;
}

// angle
// ----------------------------------
.vui-icon-angle-top, .vui-icon-angle-right, .vui-icon-angle-bottom, .vui-icon-angle-left {
  position: relative;
  display: inline-block;
  width: .5rem * $rem-ratio;
  height: .5rem * $rem-ratio;
}

.vui-icon-angle-top:after, .vui-icon-angle-right:after, .vui-icon-angle-bottom:after, .vui-icon-angle-left:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid map-get($icon, color);
}

.vui-icon-angle-top:after {
  border-width: 1px 0 0 1px;
  @include transform(rotate(45deg) translate3d(25%, 25%, 0));
}

.vui-icon-angle-right:after {
  border-width: 1px 1px 0 0;
  @include transform(rotate(45deg) translate3d(-25%, 25%, 0));
}

.vui-icon-angle-bottom:after {
  border-width: 0 1px 1px 0;
  @include transform(rotate(45deg) translate3d(-25%, -25%, 0));
}

.vui-icon-angle-left:after {
  border-width: 0 0 1px 1px;
  @include transform(rotate(45deg) translate3d(25%, -25%, 0));
}