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

// Add icons
.content-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  @include iconmoon();
  font-size: 25px;
  position: relative;
  &-green, &-red, &-orange {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-size: 25px;
    cursor: pointer;
    display: block;
    z-index: 99;
  }
  &-green {
    background-color: $content-green-color;
  }
  &-red {
    background-color: $content-red-color;
  }
  &-orange {
    background-color: $content-orange-color;
  }
  &-add {
    &:after {
      content: "\e921";
      color: #ffffff;
      @include centerAbsolute();
    }
    &.gray {
      &:after {
        color: #606060;
      }
    }
    &.white {
      &:after {
        color: $white-color;
      }
    }
  }
  &-update {
    &:after {
      content: "\e911";
      color: #ffffff;
      @include centerAbsolute();
    }
    &.gray {
      &:after {
        color: #606060;
      }
    }
    &.white {
      &:after {
        color: $white-color;
      }
    }
  }
  &-delete {
    &:after {
      content: "\e910";
      color: #ffffff;
      @include centerAbsolute();
    }
    &.gray {
      &:after {
        color: #606060;
      }
    }
    &.white {
      &:after {
        color: $white-color;
      }
    }
  }
  &-button {
    display: inline-block;
    position: absolute;
    right: 6px;
    width: 21px;
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
  &-popup-wrapper {
    position: absolute;
    right: 100px;
    bottom: -25px;
    @media (max-width: 576px){
      width: 40px;
      height: 40px;
      background-size: 20px;
      bottom: -15px;
      right: 20px;
    }
  }
}