@import (reference) "variables";
@import (reference) "mixins";
@import (reference) "ui";

@font-face {
	font-family: 'sonar';
	src:url('../fonts/sonar-5.0.eot?');
	src:url('../fonts/sonar-5.0.eot?#iefix') format('embedded-opentype'),
		  url('../fonts/sonar-5.0.woff?') format('woff'),
		  url('../fonts/sonar-5.0.ttf?') format('truetype'),
		  url('../fonts/sonar-5.0.svg?#sonar') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'sonar';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a[class^="icon-"], a[class*=" icon-"] {
  .link-no-underline;
}


/*
 * Colors
 */


.icon-black { color: @baseFontColor; }
.icon-red { color: @red; }
.icon-green { color: @green; }


/*
 * Severity
 */

[class^="icon-severity-"], [class*=" icon-severity"] {
  position: relative;
  top: -1px;
}

.icon-severity-blocker:before,
.icon-severity-4:before {
  content: "\f000";
  color: @severityBlockerColor;
  font-size: @iconSmallFontSize;
}
.icon-severity-critical:before,
.icon-severity-3:before {
  content: "\f001";
  color: @severityCriticalColor;
  font-size: @iconSmallFontSize;
}
.icon-severity-major:before,
.icon-severity-2:before {
  content: "\f003";
  color: @severityMajorColor;
  font-size: @iconSmallFontSize;
}
.icon-severity-minor:before,
.icon-severity-1:before {
  content: "\f006";
  color: @severityMinorColor;
  font-size: @iconSmallFontSize;
}
.icon-severity-info:before,
.icon-severity-0:before {
  content: "\f004";
  color: @severityInfoColor;
  font-size: @iconSmallFontSize;
}


/*
 * Status
 */

[class^="icon-status-"], [class*=" icon-status"] {
  position: relative;
  top: -1px;
}

.icon-status-open:before {
  content: "\f010";
  color: @statusOpenColor;
  font-size: @iconSmallFontSize;
  line-height: @iconLineHeight;
}
.icon-status-confirmed:before {
  content: "\f011";
  color: @statusConfirmedColor;
  font-size: @iconSmallFontSize;
  line-height: @iconLineHeight;
}
.icon-status-reopened:before {
  content: "\f012";
  color: @statusReopenedColor;
  font-size: @iconSmallFontSize;
  line-height: @iconLineHeight;
}
.icon-status-resolved:before {
  content: "\f013";
  color: @statusResolvedColor;
  font-size: @iconSmallFontSize;
  line-height: @iconLineHeight;
}
.icon-status-closed:before {
  content: "\f014";
  color: @statusClosedColor;
  font-size: @iconSmallFontSize;
  line-height: @iconLineHeight;
}


/*
 * Test Status
 */

.icon-test-status-ok:before {
  content: "\f013";
  color: @green;
  font-size: @iconFontSize;
}
.icon-test-status-failure:before {
  content: "\f000";
  color: @orange;
  font-size: @iconFontSize;
}
.icon-test-status-error:before {
  content: "\f057";
  color: @red;
  font-size: @iconFontSize;
}
.icon-test-status-skipped:before {
  content: "\f056";
  color: @middleGrey;
  font-size: @iconFontSize;
}


/*
 * Alert
 */

.icon-alert-ok:before {
  content: "\f013";
  color: @green;
  font-size: @iconFontSize;
}
.icon-alert-warn:before {
  content: "\f000";
  color: @orange;
  font-size: @iconFontSize;
}
.icon-alert-error:before {
  content: "\f057";
  color: @red;
  font-size: @iconFontSize;
}
.icon-alert-none:before {
  content: "\f056";
  color: @middleGrey;
  font-size: @iconFontSize;
}


/*
 * Qualifier
 */

[class^="icon-qualifier-"], [class*=" icon-qualifier-"] {
  position: relative;
  top: -1px;
  color: @baseFontColor;
  font-size: @iconFontSize;
}

.icon-qualifier-dir:before,
.icon-qualifier-pac:before { content: "\f114"; }
.icon-qualifier-trk:before,
.icon-qualifier-brc:before,
.icon-qualifier-dev_prj:before { content: "\e600"; }
.icon-qualifier-cla:before,
.icon-qualifier-fil:before { content: "\f0f6"; }
.icon-qualifier-uts:before { content: "\e602"; }
.icon-qualifier-lib:before { content: "\e604"; }
.icon-qualifier-vw:before,
.icon-qualifier-svw:before { content: "\e608"; }
.icon-qualifier-dev:before { content: "\e60a"; }

.icon-qualifier-dir:before,
.icon-qualifier-pac:before { color: @orange; }
.icon-qualifier-cla:before,
.icon-qualifier-fil:before,
.icon-qualifier-trk:before,
.icon-qualifier-brc:before,
.icon-qualifier-uts:before,
.icon-qualifier-lib:before,
.icon-qualifier-vw:before,
.icon-qualifier-svw:before,
.icon-qualifier-dev:before,
.icon-qualifier-dev_prj:before { color: darken(@blue, 10%); }


/*
 * Trends
 */

[class^="icon-trend-"], [class*=" icon-trend-"] {
  position: relative;
  top: -1px;
  font-size: @iconSmallFontSize;
}

.icon-trend-big {
  font-size: @iconFontSize;
}

.icon-trend-0:before {
  content: "\e607";
}
.icon-trend-1:before {
  content: "\e605";
}
.icon-trend--1:before {
  content: "\e601";
}
.icon-trend-2:before {
  content: "\e606";
}
.icon-trend--2:before {
  content: "\e603";
}


/*
 * Checkbox
 */

.icon-checkbox {
  position: relative;
  top: -1px;
  color: @secondFontColor;
  font-size: @iconFontSize;
}

.icon-checkbox:before {
  content: "\e60c";
}

.icon-checkbox-checked {

  &:after {
    color: @blue;
  }

  &:after {
    content: "\e60d";
    position: absolute;
    top: 0; left: 0;
  }

  &.icon-checkbox-single:after { content: "\e60e"; }
}

// Used for align elements
.icon-checkbox-invisible {
  visibility: hidden;
}


/*
 * Common
 */

.icon-list:before {
  content: "\f039";
  font-size: @iconSmallFontSize;
}
.icon-bullet-list:before {
  content: "\f03a";
}
.icon-settings:before {
  content: "\f015";
}
.icon-bulk-change:before {
  content: "\f085";
  font-size: @iconSmallFontSize;
}
.icon-arrow-down:before {
  content: "\f0d7";
  position: relative;
  top: -2px;
}
.icon-arrow-up:before {
  content: "\f0d8";
  position: relative;
  top: -2px;
}
.icon-arrow-left:before {
  content: "\f0d9";
}
.icon-arrow-right:before {
  content: "\f0da";
}
.icon-dropdown:before {
  content: "\f0d7";
  position: relative;
  top: -1px;
}
.icon-sort-desc:before {
  content: "\f0d7";
  position: relative;
  top: -1px;
}
.icon-sort-asc:before {
  content: "\f0d8";
  position: relative;
  top: -1px;
}
.icon-emoticon-smiley:before {
  content: "\f118";
}
.icon-emoticon-sad:before {
  content: "\f119";
}
.icon-emoticon-speechless:before {
  content: "\f11a";
}
.icon-rect-check:before {
  content: "\f046";
}
.icon-check:before {
  content: "\f00c";
  color: @green;
  font-size: @iconFontSize;
}
.icon-default:before {
  position: relative;
  top: -0.1em;
  content: "\f00c";
}
.icon-lang:before {
  content: "\f024";
  font-size: @iconSmallFontSize;
}
.icon-quality-profile:before {
  content: "\f022";
  font-size: @iconSmallFontSize;
}
.icon-tags:before {
  content: "\f02c";
  font-size: @iconSmallFontSize;
}
.icon-calendar:before {
  content: "\f073";
  font-size: @iconFontSize;
}
.icon-favorite { font-size: @iconFontSize; }
.icon-favorite:before {
  content: "\f005";
  color: @orange;
  font-size: @iconFontSize;
}
.icon-not-favorite { font-size: @iconFontSize; }
.icon-not-favorite:before {
  content: "\f005";
  color: @darkGrey;
  font-size: @iconFontSize;
}
.icon-help:before {
  content: "\f059";
  color: @blue;
  font-size: @iconFontSize;
}
.icon-info:before {
  content: "\f05a";
  color: @blue;
  font-size: @iconFontSize;
}
.icon-uniF060:before {
  content: "\f060";
}
.icon-uniF061:before {
  content: "\f061";
}
.icon-uniF062:before {
  content: "\f062";
}
.icon-uniF063:before {
  content: "\f063";
}
.icon-comment:before {
  content: "\f075";
  font-size: @iconSmallFontSize;
}
.icon-delete:before {
  content: "\f00d";
  color: @red;
  font-size: @iconFontSize;
}
.icon-close:before {
  content: "\f00d";
  font-size: @iconFontSize;
}
.icon-compare:before {
  content: "\f0c5";
  font-size: @iconSmallFontSize;
}
.icon-restore:before {
  content: "\f122";
  font-size: @iconSmallFontSize;
}
.icon-inheritance:before {
  content: "\f126";
}
.icon-plus:before {
  content: "\f067";
  font-size: @iconFontSize;
}
.icon-link:before {
  content: "\f127";
  font-size: @iconSmallFontSize;
}
.icon-move-down:before {
  content: "\f063";
  color: @darkBlue;
  font-size: @iconFontSize;
}
.icon-move-up:before {
  content: "\f062";
  color: @darkBlue;
  font-size: @iconFontSize;
}
.icon-move-left:before {
  content: "\f060";
  color: @darkBlue;
  font-size: @iconFontSize;
}
.icon-move-right:before {
  content: "\f061";
  color: @darkBlue;
  font-size: @iconFontSize;
}
.icon-scm:before {
  content: "\f017";
  font-size: @iconSmallFontSize;
}
.icon-scm_dev:before {
  content: "\f015";
  font-size: @iconSmallFontSize;
}
.icon-ci:before {
  content: "\f021";
  font-size: @iconSmallFontSize;
}
.icon-issue:before {
  content: "\f188";
  font-size: @iconSmallFontSize;
}
.icon-homepage:before {
  content: "\f016";
  font-size: @iconSmallFontSize;
}
.icon-resizer:before {
  content: "\f142";
  color: @darkGrey;
  font-size: @iconFontSize;
}
.icon-expand:before {
  content: "\e60b";
  font-size: @iconFontSize;
}
.icon-period:before {
  content: "\f018";
  font-size: @iconFontSize;
}
.icon-filter:before {
  content: "\f03a";
  font-size: @iconFontSize;
}
.icon-detach:before {
  content: "\f08e";
  font-size: @iconSmallFontSize;
}
.icon-chevron-left:before {
  content: "\f104";
  font-size: @iconSmallFontSize;
}
.icon-chevron-right:before {
  content: "\f105";
  font-size: @iconSmallFontSize;
}
.icon-double-chevron-left:before {
  content: "\f100";
  font-size: @iconSmallFontSize;
}
.icon-double-chevron-right:before {
  content: "\f101";
  font-size: @iconSmallFontSize;
}
.icon-extension:before {
  content: "\f069";
  font-size: @iconFontSize;
}
.icon-home:before {
  content: "\f016";
  font-size: @iconFontSize;
}
.icon-component-viewer-filter:before {
  content: "\e60e";
  color: #999;
  font-size: @iconSmallFontSize;
}
.icon-filters:before {
  content: "\f039";
  font-size: @iconSmallFontSize;
}
.icon-next:before {
  content: "\f0d7";
  font-size: @iconFontSize;
}
.icon-prev:before {
  content: "\f0d8";
  font-size: @iconFontSize;
}
.icon-search:before {
  content: "\f002";
  font-size: @iconFontSize;
}


/*
 * Spinner
 */

.spinner {
  position: relative;
  vertical-align: middle;
  .square(16px);
  border: 2px solid #0cf;
  border-radius: 50%;
  .animation(spin 0.75s infinite linear);

  // For IE9 only, because it does not support css animations
  // Show animated gif
  .ie9 & {
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    border: none;
  }
}

.spinner:before,
.spinner:after {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: '';
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

.spinner,
.spinner:before,
.spinner:after {
  display: inline-block;
  .box-sizing(border-box);
  border-color: transparent;
  border-top-color: @blue;
  .animation-duration(1.2s);
}
.spinner:before {
  .rotate(120deg);
}
.spinner:after {
  .rotate(240deg);
}

.spinner-margin {
  margin: 10px;
}

@-webkit-keyframes spin {
  from { .rotate(0deg); }
  to { .rotate(360deg); }
}
@keyframes spin {
  from { .rotate(0deg); }
  to { .rotate(360deg); }
}