@import "../common/colors";
@import "../common/mixins";
@import "../common/media_querys";



$iconSize-xxsm: 16px;
$iconSize-xsm: 24px;
$iconSize-sm: 36px;
$iconSize-md: 48px;
$iconSize-md-l: 64px;
$iconSize-lg: 96px;
$iconSize-xlg: 128px;
$iconSize-xxlg: 60px;

[class^="icon"], [class*=" icon"] {
  -webkit-app-region: no-drag;

  &.selectable {
    cursor: pointer;
  }

  &.align-center {
    margin: 0 auto;
  }

  path {
    fill: inherit;
  }



  &.icon-theme-dark
  {
    &.icon--color-secondary {
      fill: $color-secondary-dark;
    }
  }

  &.icon-theme-light
  {
    &.icon--color-secondary {
      fill: $color-secondary-light;
    }
  }



}

@mixin iconSize($breackPoint, $sizeName, $iconSize) {
  /* Container Directions */
  .icon_size-#{$breackPoint}-#{$sizeName}:before {
    font-size: $iconSize;
  }
}



/*default class icon*/
.icon-size-xxsm {
  width: $iconSize-xxsm;
  height: $iconSize-xxsm;
}
.icon-size-xsm {
  width: $iconSize-xsm;
  height: $iconSize-xsm;
}

.icon-size-sm {

  width: $iconSize-sm;
  height: $iconSize-sm;
}

.icon-size-md {
  width: $iconSize-md;
  height: $iconSize-md;
}

.icon-size-md-l {

  width: $iconSize-md-l;
  height: $iconSize-md-l;
}

.icon-size-lg {
  width: $iconSize-lg;
  height: $iconSize-lg;
}

.icon-size-xlg {

  width: $iconSize-xlg;
  height: $iconSize-xlg;
}

.icon-size-xxlg {

  width: $iconSize-xxlg;
  height: $iconSize-xxlg;
}

@media #{$medium-up} {
  @include iconSize(medium-up, xs, $iconSize-xsm);
  @include iconSize(medium-up, sm, $iconSize-sm);
  @include iconSize(medium-up, md, $iconSize-md);
  @include iconSize(medium-up, md-l, $iconSize-md-l);
  @include iconSize(medium-up, lg, $iconSize-lg);
  @include iconSize(medium-up, xlg, $iconSize-xlg);
  @include iconSize(medium-up, xxlg, $iconSize-xxlg);
}
@media #{$small-only} {
  @include iconSize(small-only, xs, $iconSize-xsm);
  @include iconSize(small-only, sm, $iconSize-sm);
  @include iconSize(small-only, md, $iconSize-md);
  @include iconSize(small-only, md-l, $iconSize-md-l);
  @include iconSize(small-only, lg, $iconSize-lg);
  @include iconSize(small-only, xlg, $iconSize-xlg);
  @include iconSize(small-only, xxlg, $iconSize-xxlg);
}
@media #{$small-up} {
  @include iconSize(small-up, xs, $iconSize-xsm);
  @include iconSize(small-up, sm, $iconSize-sm);
  @include iconSize(small-up, md, $iconSize-md);
  @include iconSize(small-up, md-l, $iconSize-md-l);
  @include iconSize(small-up, lg, $iconSize-lg);
  @include iconSize(small-up, xlg, $iconSize-xlg);
  @include iconSize(small-up, xxlg, $iconSize-xxlg);
}
@media #{$medium-only} {
  @include iconSize(medium-only, xs, $iconSize-xsm);
  @include iconSize(medium-only, sm, $iconSize-sm);
  @include iconSize(medium-only, md, $iconSize-md);
  @include iconSize(medium-only, md-l, $iconSize-md-l);
  @include iconSize(medium-only, lg, $iconSize-lg);
  @include iconSize(medium-only, xlg, $iconSize-xlg);
  @include iconSize(medium-only, xxlg, $iconSize-xxlg);
}
@media #{$large-only} {
  @include iconSize(large-only, xs, $iconSize-xsm);
  @include iconSize(large-only, sm, $iconSize-sm);
  @include iconSize(large-only, md, $iconSize-md);
  @include iconSize(large-only, md-l, $iconSize-md-l);
  @include iconSize(large-only, lg, $iconSize-lg);
  @include iconSize(large-only, xlg, $iconSize-xlg);
  @include iconSize(large-only, xxlg, $iconSize-xxlg);
}
@media #{$large-up} {
  @include iconSize(large-up, xs, $iconSize-xsm);
  @include iconSize(large-up, sm, $iconSize-sm);
  @include iconSize(large-up, md, $iconSize-md);
  @include iconSize(large-up, md-l, $iconSize-md-l);
  @include iconSize(large-up, lg, $iconSize-lg);
  @include iconSize(large-up, xlg, $iconSize-xlg);
  @include iconSize(large-up, xxlg, $iconSize-xxlg);
}

.icon--color-primary {
  fill: $color-primary;
}
.icon--color-accent {
  fill: $color-accent;
}
.icon--color-primary-dark {
  fill: $color-primary-800;
}
.icon--color-white {
  fill: $color-white;
}
.icon--color-primary-light {
  fill: $color-primary-300;
}

.icon--color-primary-50 {  fill: $color-primary-50;}
.icon--color-primary-100 {  fill: $color-primary-100;}
.icon--color-primary-200 {  fill: $color-primary-200;}
.icon--color-primary-300 {  fill: $color-primary-300;}
.icon--color-primary-400 {  fill: $color-primary-400;}
.icon--color-primary-500 {  fill: $color-primary-500;}
.icon--color-primary-600 {  fill: $color-primary-600;}
.icon--color-primary-700 {  fill: $color-primary-700;}
.icon--color-primary-800 {  fill: $color-primary-800;}
.icon--color-primary-900 {  fill: $color-primary-900;}

.icon--color-secondary-dark {
  fill: $color-secondary-dark;
}
.icon--color-secondary-light {
  fill: $color-secondary-light;
}
.icon--color-success {
  fill: $color-success;
}
.icon--color-info {
  fill: $color-info;
}
.icon--color-secondary-text {
  fill: $color-light-text-secondary;
}

.icon--color-warning {
  fill: $color-warning;
}
.icon--color-danger{
  fill: $color-danger;
}
.icon--color-light {
  fill: $color-white;
}
.icon--color-dark {
  fill: $color-dark;
}
.icon--color-text{
  fill: $color-light-text-primary;
}
.icon-spin {
  margin: auto;
  text-align: center;
  -webkit-animation: spin 1.0s linear infinite normal;
  -moz-animation: spin 1.0s linear infinite normal;
  -o-animation: spin 1.0s linear infinite normal;
  animation: spin 1.0s linear infinite normal;
}

/*------------------------------*/

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@-o-keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(-359deg);
    -moz-transform: rotate(-359deg);
    -ms-transform: rotate(-359deg);
    -o-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}