@import '../../themes/default/elements/icon.variables';

@if $use-icon {
  /*******************************
  //@-         Icon
  *******************************/
  
  @font-face {
    font-family: 'Icons';
    src: $icon-fallback-src;
    src: $icon-src;
    font-style: normal;
    font-weight: $normal;
    font-variant: normal;
    text-decoration: inherit;
    text-transform: none;
  }
  
  i.icon {
    display: inline-block;
    opacity: $icon-opacity;
  
    margin: 0 $icon-distance-from-text 0 0;
  
    width: $icon-width;
    height: $icon-height;
  
    font-family: 'Icons';
    font-style: normal;
    font-weight: $normal;
    text-decoration: inherit;
    text-align: center;
  
    speak: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
  }
  
  i.icon:before {
    background: none !important;
  }
  
  /*******************************
               Types
  *******************************/
  
  /*--------------
      Loading
  ---------------*/
  
  i.icon.loading {
    height: 1em;
    line-height: 1;
    animation: loader $icon-loading-duration linear infinite;
  }
  
  /*******************************
               States
  *******************************/
  
  i.icon:hover, i.icons:hover,
  i.icon:active, i.icons:active,
  i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
    opacity: 1;
  }
  
  i.disabled.icon, i.disabled.icons {
    opacity: $disabled-opacity;
    cursor: default;
    pointer-events: none;
  }
  
  
  /*******************************
             Variations
  *******************************/
  
  
  /*-------------------
          Fitted
  --------------------*/
  
  i.fitted.icon {
    width: auto;
    margin: 0 !important;
  }
  
  /*-------------------
           Link
  --------------------*/
  
  i.link.icon:not(.disabled), i.link.icons:not(.disabled) {
    cursor: pointer;
    opacity: $icon-link-opacity;
    transition: opacity $default-duration $default-easing;
  }
  i.link.icon:hover, i.link.icons:hover {
    opacity: 1;
  }
  
  /*-------------------
        Circular
  --------------------*/
  
  i.circular.icon {
    border-radius: 500em !important;
    line-height: 1 !important;
  
    padding: $icon-circular-padding !important;
    box-shadow: $icon-circular-shadow;
  
    width: $icon-circular-size !important;
    height: $icon-circular-size !important;
  }
  i.circular.inverted.icon {
    border: none;
    box-shadow: none;
  }
  
  /*-------------------
        Flipped
  --------------------*/
  
  i.flipped.icon,
  i.horizontally.flipped.icon {
    transform: scale(-1, 1);
  }
  i.vertically.flipped.icon {
    transform: scale(1, -1);
  }
  
  /*-------------------
        Rotated
  --------------------*/
  
  i.rotated.icon,
  i.right.rotated.icon,
  i.clockwise.rotated.icon {
    transform: rotate(90deg);
  }
  
  i.left.rotated.icon,
  i.counterclockwise.rotated.icon {
    transform: rotate(-90deg);
  }
  
  i.halfway.rotated.icon {
    transform: rotate(180deg);
  }
  
  /*--------------------------
        Flipped & Rotated
  ---------------------------*/
  i.rotated.flipped.icon,
  i.right.rotated.flipped.icon,
  i.clockwise.rotated.flipped.icon {
    transform: scale(-1, 1) rotate(90deg);
  }
  
  i.left.rotated.flipped.icon,
  i.counterclockwise.rotated.flipped.icon {
    transform: scale(-1, 1) rotate(-90deg);
  }
  
  i.halfway.rotated.flipped.icon {
    transform: scale(-1, 1) rotate(180deg);
  }
  
  i.rotated.vertically.flipped.icon,
  i.right.rotated.vertically.flipped.icon,
  i.clockwise.rotated.vertically.flipped.icon {
    transform: scale(1, -1) rotate(90deg);
  }
  
  i.left.rotated.vertically.flipped.icon,
  i.counterclockwise.rotated.vertically.flipped.icon {
    transform: scale(1, -1) rotate(-90deg);
  }
  
  i.halfway.rotated.vertically.flipped.icon {
    transform: scale(1, -1) rotate(180deg);
  }
  
  /*-------------------
        Bordered
  --------------------*/
  
  i.bordered.icon {
    line-height: 1;
    vertical-align: baseline;
  
    width: $icon-bordered-size;
    height: $icon-bordered-size;
    padding: $icon-bordered-vertical-padding $icon-bordered-horizontal-padding !important;
    box-shadow: $icon-bordered-shadow;
  }
  i.bordered.inverted.icon {
    border: none;
    box-shadow: none;
  }
  
  /*-------------------
        Inverted
  --------------------*/
  
  /* Inverted Shapes */
  i.inverted.bordered.icon,
  i.inverted.circular.icon {
    background-color: $black;
    color: $white;
  }
  
  i.inverted.icon {
    color: $white;
  }
  
  
  /*-------------------
         Colors
  --------------------*/
  
  @each $key, $value in $colors {
    $color: $key;
    $c: map-get($value, color);
    $l: map-get($value, light);
  
    i.#{$key + ""}.icon.icon.icon.icon {
      color: $c;
    }
    i.inverted.#{$key + ""}.icon.icon.icon.icon {
      color: $l;
    }
    i.inverted.bordered.#{$key + ""}.icon.icon.icon.icon,
    i.inverted.circular.#{$key + ""}.icon.icon.icon.icon {
      background-color: $c;
      color: $white;
    }
  }
  
  
  /*-------------------
          Sizes
  --------------------*/
  
  i.mini.mini.mini.icon,
  i.mini.mini.mini.icons {
    line-height: 1;
    font-size: $icon-mini;
  }
  i.tiny.tiny.tiny.icon,
  i.tiny.tiny.tiny.icons {
    line-height: 1;
    font-size: $icon-tiny;
  }
  i.small.small.small.icon,
  i.small.small.small.icons {
    line-height: 1;
    font-size: $icon-small;
  }
  i.icon,
  i.icons {
    font-size: $icon-medium;
  }
  i.large.large.large.icon,
  i.large.large.large.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: $icon-large;
  }
  i.big.big.big.icon,
  i.big.big.big.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: $icon-big;
  }
  i.huge.huge.huge.icon,
  i.huge.huge.huge.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: $icon-huge;
  }
  i.massive.massive.massive.icon,
  i.massive.massive.massive.icons {
    line-height: 1;
    vertical-align: middle;
    font-size: $icon-massive;
  }
  
  /*******************************
              Groups
  *******************************/
  
  i.icons {
    display: inline-block;
    position: relative;
    line-height: 1;
  }
  
  i.icons .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
  }
  
  i.icons .icon:first-child {
    position: static;
    width: auto;
    height: auto;
    vertical-align: top;
    transform: none;
  }
  
  /* Corner Icon */
  i.icons .corner.icon {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    transform: none;
    font-size: $icon-corner-size;
    text-shadow: $icon-corner-shadow;
  }
  i.icons .icon.corner[class*="top right"] {
    top: 0;
    left: auto;
    right: 0;
    bottom: auto;
  }
  i.icons .icon.corner[class*="top left"] {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }
  i.icons .icon.corner[class*="bottom left"] {
    top: auto;
    left: 0;
    right: auto;
    bottom: 0;
  }
  i.icons .icon.corner[class*="bottom right"] {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
  }
  
  i.icons .inverted.corner.icon {
    text-shadow: $icon-corner-inverted-shadow;
  }
}

@import '../../themes/default/elements/icon.style';