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

// Icons round
.icons {
  &-round {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    padding-top: 4px;
    box-sizing: border-box;
    margin: 0 6px;
    display: inline-block;
    font-size: 25px;
    position: relative;
    @include iconmoon();
    &.red {
      background-color: #ed1c24;
    }
    &.orange {
      background-color: #ff9913;
    }
    &.green {
      background-color: #87bd23;
    }
    .icon {
      &-clock {
        &:after {
          content: "\e901";
          color: rgb(35, 47, 57);
        }
        &.white {
          &:after {
            color: $white-color;
          }
        }
        &.gray {
          &:after {
            color: #cdcdcd;
          }
        }
        &.orange {
          &:after {
            color: $content-orange-color;
          }
        }
      }
      &-database {
        &:after {
          content: "\e903";
          color: rgb(35, 47, 57);
        }
        &.white {
          &:after {
            color: $white-color;
          }
        }
        &.gray {
          &:after {
            color: #cdcdcd;
          }
        }
        &.orange {
          &:after {
            color: $content-orange-color;
          }
        }
      }
    }
  }
}
.icon {
  &-round {
    &-position {
      @include centerAbsolute();
      font-size: 24px;
    }
  }
}