/*

* # Semantic - Icon
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘element’; @element : ‘icon’;

@import ‘../../theme.config’;

/*******************************

Icon

*******************************/

@font-face {

font-family: 'Icons';
src: url("@{fontPath}/@{fontName}.eot");
src:
  url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
  url("@{fontPath}/@{fontName}.svg#icons") format('svg'),
  url("@{fontPath}/@{fontName}.woff") format('woff'),
  url("@{fontPath}/@{fontName}.ttf") format('truetype')
;

font-style: normal;
font-weight: normal;
font-variant: normal;
text-decoration: inherit;
text-transform: none;

}

i.icon {

display: inline-block;
opacity: @opacity;

margin: 0em @distanceFromText 0em 0em;

width: @width;
height: @height;

font-family: 'Icons';
font-style: normal;
line-height: 1;
font-weight: normal;
text-decoration: inherit;
text-align: center;

speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;

}

i.icon:before {

background: none !important;

}

/*******************************

Types

*******************************/

/*————–

Loading

—————*/

i.icon.loading {

height: 1em;
animation: icon-loading @loadingDuration linear infinite;

} @keyframes icon-loading {

from {
   transform: rotate(0deg);
}
to {
   transform: rotate(360deg);
}

}

/*******************************

States

*******************************/

i.icon.hover {

opacity: 1;

}

i.icon.active {

opacity: 1;

}

i.emphasized.icon {

opacity: 1;

}

i.disabled.icon {

pointer-events: none;
opacity: @disabledOpacity !important;

}

/*******************************

Variations

*******************************/

/*——————-

Link

——————–*/

i.link.icon {

cursor: pointer;
opacity: @linkOpacity;
transition: opacity @transitionDuration @transitionEasing;

} i.link.icon:hover {

opacity: 1 !important;

}

/*——————-

Circular

——————–*/

i.circular.icon {

border-radius: 500em !important;

padding: @circularPadding !important;

box-shadow: @circularShadow;

line-height: 1 !important;
width: @circularSize !important;
height: @circularSize !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);

}

/*——————-

Bordered

——————–*/

i.bordered.icon {

width: @borderedSize;
height: @borderedSize;

padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
box-shadow: @borderedShadow;

vertical-align: baseline;

} i.bordered.inverted.icon {

border: none;
box-shadow: none;

}

/*——————-

Colors

——————–*/

i.white.icon {

color: @white !important;

} i.black.icon {

color: @black !important;

} i.blue.icon {

color: @blue !important;

} i.green.icon {

color: @green !important;

} i.orange.icon {

color: @orange !important;

} i.pink.icon {

color: @pink !important;

} i.purple.icon {

color: @purple !important;

} i.red.icon {

color: @red !important;

} i.teal.icon {

color: @teal !important;

} i.yellow.icon {

color: @yellow !important;

}

/*——————-

Inverted

——————–*/

i.inverted.icon {

color: @white;

} i.inverted.black.icon {

color: @lightBlack !important;

} i.inverted.blue.icon {

color: @lightBlue !important;

} i.inverted.green.icon {

color: @lightGreen !important;

} i.inverted.orange.icon {

color: @lightOrange !important;

} i.inverted.pink.icon {

color: @lightPink !important;

} i.inverted.purple.icon {

color: @lightPurple !important;

} i.inverted.red.icon {

color: @lightRed !important;

} i.inverted.teal.icon {

color: @lightTeal !important;

} i.inverted.yellow.icon {

color: @lightYellow !important;

}

/* Inverted Shapes */ i.inverted.bordered.icon, i.inverted.circular.icon {

background-color: #222222 !important;
color: #FFFFFF !important;

} i.inverted.bordered.black.icon, i.inverted.circular.black.icon {

background-color: @black !important;
color: #FFFFFF !important;

} i.inverted.bordered.blue.icon, i.inverted.circular.blue.icon {

background-color: @blue !important;
color: #FFFFFF !important;

} i.inverted.bordered.green.icon, i.inverted.circular.green.icon {

background-color: @green !important;
color: #FFFFFF !important;

} i.inverted.bordered.orange.icon, i.inverted.circular.orange.icon {

background-color: @orange !important;
color: #FFFFFF !important;

} i.inverted.bordered.pink.icon, i.inverted.circular.pink.icon {

background-color: @pink !important;
color: #FFFFFF !important;

} i.inverted.bordered.purple.icon, i.inverted.circular.purple.icon {

background-color: @purple !important;
color: #FFFFFF !important;

} i.inverted.bordered.red.icon, i.inverted.circular.red.icon {

background-color: @red !important;
color: #FFFFFF !important;

} i.inverted.bordered.teal.icon, i.inverted.circular.teal.icon {

background-color: @teal !important;
color: #FFFFFF !important;

} i.inverted.bordered.yellow.icon, i.inverted.circular.yellow.icon {

background-color: @yellow !important;
color: #FFFFFF !important;

}

/*——————-

Sizes

——————–*/

i.small.icon {

font-size: @small;

} i.icon {

font-size: @medium;

} i.large.icon {

font-size: @large;
vertical-align: middle;

} i.big.icon {

font-size: @big;
vertical-align: middle;

} i.huge.icon {

font-size: @huge;
vertical-align: middle;

} i.massive.icon {

font-size: @massive;
vertical-align: middle;

}

.loadUIOverrides();