@import '../../global-sass-files/variables';
@import '../../global-sass-files/mixins';

// Icons generated
@font-face {
  font-family: 'icomoon';
  src:  url('../../global-sass-files/fonts/icomoon.eot');
  src:  url('../../global-sass-files/fonts/icomoon.eot') format('embedded-opentype'),
    url('../../global-sass-files/fonts/icomoon.ttf') format('truetype'),
    url('../../global-sass-files/fonts/icomoon.woff') format('woff'),
    url('../../global-sass-files/fonts/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

// Action icons
.icon {
  &-action {
    @include iconmoon();
    display: inline-block;
    font-size: 25px;
    &-update {
      &:after {
        content: "\e911";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-add {
      &:after {
        content: "\e921";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-delete {
      &:after {
        content: "\e910";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-delete-white {
      &:after {
        content: "\e910";
        color: $white-color;
      }
    }
    &-clock {
      &:after {
        content: "\e914";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-check {
      &:after {
        content: "\e913";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.green {
        &:after {
          color: $green-centreon-primary;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-warning {
      &:after {
        content: "\e920";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.red {
        &:after {
          color: $content-red-color;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-arrow-right {
      &:after {
        content: "\e923";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.red {
        &:after {
          color: $content-red-color;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
    &-arrow-left {
      &:after {
        content: "\e924";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
      &.red {
        &:after {
          color: $content-red-color;
        }
      }
      &.orange {
        &:after {
          color: $content-orange-color;
        }
      }
    }
  }
  &-position {
    &-left, &-right, &-center {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    &-left {
      left: 5px;
    }
    &-right {
      right: 5px;
    }
    &-center {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &-reset {
      position: static;
      transform: none;
    }
    &-counter {
      position: absolute;
      transform: rotate(90deg);
      right: 1px;
      top: 3px;
      font-size: 20px;
      cursor: pointer;
    }
  }
}
.icon-action-custom {
  right: 0;
  z-index: 1;
  position: absolute;
  font-size: 22px;
  &:after {
    color: $content-green-color;
  }
}