/*!

* svg-based version of:
*   # Semantic UI 2.3.1 - Icon
*   http://github.com/semantic-org/semantic-ui/
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*/

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

Changes from Semantic-UI font-based icons:

  1. no icon font, no references to font files or font properties

  2. css is defined for <svg> tags, not <i> tags

  3. no icon symbols are defined in css; all icons are defined in svg.html as symbol definitions

specifically, by commented section:

Usage:

font: <i class="info circle icon"></i>
svg : {% include icon.liquid id='info-circle' %}

Why?

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

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

SVG Icon

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

svg.icon {

display: inline-block;
position: relative;
top: .18em;
width: 1.18em;
height: 1em;
opacity: 1;
margin: 0;
fill: currentColor;
speak: none;

}

svg.icon:before {

background: none !important;

}

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

Types

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

/*————–

Loading

—————*/

svg.icon.loading {

height: 1em;
line-height: 1;
-webkit-animation: icon-loading 2s linear infinite;
        animation: icon-loading 2s linear infinite;

} @-webkit-keyframes icon-loading {

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

} @keyframes icon-loading {

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

}

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

States

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

svg.icon.hover {

opacity: 1 !important;

} svg.icon.active {

opacity: 1 !important;

} svg.emphasized.icon {

opacity: 1 !important;

} svg.disabled.icon {

opacity: 0.45 !important;

}

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

Variations

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

/*——————-

Fitted

——————–*/

svg.fitted.icon {

width: auto;
margin: 0em !important;

}

/*——————-

Link

——————–*/

svg.link.icon, svg.link.icons {

cursor: pointer;
opacity: 0.8;
-webkit-transition: opacity 0.1s ease;
transition: opacity 0.1s ease;

} svg.link.icon:hover, svg.link.icons:hover {

opacity: 1 !important;

}

/*——————-

Circular

——————–*/

svg.circular.icon {

border-radius: 500em !important;
line-height: 1 !important;
padding: 0.5em 0.5em !important;
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
width: 2em !important;
height: 2em !important;

} svg.circular.inverted.icon {

border: none;
-webkit-box-shadow: none;
        box-shadow: none;

}

/*——————-

Flipped

——————–*/

svg.flipped.icon, svg.horizontally.flipped.icon {

-webkit-transform: scale(-1, 1);
        transform: scale(-1, 1);

} svg.vertically.flipped.icon {

-webkit-transform: scale(1, -1);
        transform: scale(1, -1);

}

/*——————-

Rotated

——————–*/

svg.rotated.icon, svg.right.rotated.icon, svg.clockwise.rotated.icon {

-webkit-transform: rotate(90deg);
        transform: rotate(90deg);

} svg.left.rotated.icon, svg.counterclockwise.rotated.icon {

-webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);

}

/*——————-

Bordered

——————–*/

svg.bordered.icon {

line-height: 1;
vertical-align: baseline;
width: 2em;
height: 2em;
padding: 0.5em 0em !important;
-webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;

} svg.bordered.inverted.icon {

border: none;
-webkit-box-shadow: none;
        box-shadow: none;

}

/*——————-

Inverted

——————–*/

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

background-color: #1B1C1D !important;
color: #FFFFFF !important;

} svg.inverted.icon {

color: #FFFFFF;

}

/*——————-

Colors

——————–*/

/* Red */ svg.red.icon {

color: #DB2828 !important;

} svg.inverted.red.icon {

color: #FF695E !important;

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

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

}

/* Orange */ svg.orange.icon {

color: #F2711C !important;

} svg.inverted.orange.icon {

color: #FF851B !important;

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

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

}

/* Yellow */ svg.yellow.icon {

color: #FBBD08 !important;

} svg.inverted.yellow.icon {

color: #FFE21F !important;

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

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

}

/* Olive */ svg.olive.icon {

color: #B5CC18 !important;

} svg.inverted.olive.icon {

color: #D9E778 !important;

} svg.inverted.bordered.olive.icon, svg.inverted.circular.olive.icon {

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

}

/* Green */ svg.green.icon {

color: #21BA45 !important;

} svg.inverted.green.icon {

color: #2ECC40 !important;

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

background-color: #21BA45 !important;
color: #FFFFFF !important;

}

/* Teal */ svg.teal.icon {

color: #00B5AD !important;

} svg.inverted.teal.icon {

color: #6DFFFF !important;

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

background-color: #00B5AD !important;
color: #FFFFFF !important;

}

/* Blue */ svg.blue.icon {

color: #2185D0 !important;

} svg.inverted.blue.icon {

color: #54C8FF !important;

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

background-color: #2185D0 !important;
color: #FFFFFF !important;

}

/* Violet */ svg.violet.icon {

color: #6435C9 !important;

} svg.inverted.violet.icon {

color: #A291FB !important;

} svg.inverted.bordered.violet.icon, svg.inverted.circular.violet.icon {

background-color: #6435C9 !important;
color: #FFFFFF !important;

}

/* Purple */ svg.purple.icon {

color: #A333C8 !important;

} svg.inverted.purple.icon {

color: #DC73FF !important;

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

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

}

/* Pink */ svg.pink.icon {

color: #E03997 !important;

} svg.inverted.pink.icon {

color: #FF8EDF !important;

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

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

}

/* Brown */ svg.brown.icon {

color: #A5673F !important;

} svg.inverted.brown.icon {

color: #D67C1C !important;

} svg.inverted.bordered.brown.icon, svg.inverted.circular.brown.icon {

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

}

/* Grey */ svg.grey.icon {

color: #767676 !important;

} svg.inverted.grey.icon {

color: #DCDDDE !important;

} svg.inverted.bordered.grey.icon, svg.inverted.circular.grey.icon {

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

}

/* Black */ svg.black.icon {

color: #1B1C1D !important;

} svg.inverted.black.icon {

color: #545454 !important;

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

background-color: #1B1C1D !important;
color: #FFFFFF !important;

}

/*——————-

Sizes

——————–*/

svg.mini.icon, svg.mini.icons {

line-height: 1;
font-size: 0.4em;

} svg.tiny.icon, svg.tiny.icons {

line-height: 1;
font-size: 0.5em;

} svg.small.icon, svg.small.icons {

line-height: 1;
font-size: 0.75em;

} svg.icon, svg.icons {

font-size: 1em;

} svg.large.icon, svg.large.icons {

line-height: 1;
vertical-align: middle;
font-size: 1.5em;

} svg.big.icon, svg.big.icons {

line-height: 1;
vertical-align: middle;
font-size: 2em;

} svg.huge.icon, svg.huge.icons {

line-height: 1;
vertical-align: middle;
font-size: 4em;

} svg.massive.icon, svg.massive.icons {

line-height: 1;
vertical-align: middle;
font-size: 8em;

}

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

Groups

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

svg.icons {

display: inline-block;
position: relative;
line-height: 1;

} svg.icons .icon {

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
margin: 0em;
margin: 0;

} svg.icons .icon:first-child {

position: static;
width: auto;
height: auto;
vertical-align: top;
-webkit-transform: none;
        transform: none;
margin-right: 0.25rem;

}

/* Corner Icon */ svg.icons .corner.icon {

top: auto;
left: auto;
right: 0;
bottom: 0;
-webkit-transform: none;
        transform: none;
font-size: 0.45em;
text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;

} svg.icons .top.right.corner.icon {

top: 0;
left: auto;
right: 0;
bottom: auto;

} svg.icons .top.left.corner.icon {

top: 0;
left: 0;
right: auto;
bottom: auto;

} svg.icons .bottom.left.corner.icon {

top: auto;
left: 0;
right: auto;
bottom: 0;

} svg.icons .bottom.right.corner.icon {

top: auto;
left: auto;
right: 0;
bottom: 0;

} svg.icons .inverted.corner.icon {

text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D;

}