@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;
}

// Close icon big
.icon {
  &-close {
    @include iconmoon();
    display: inline-block;
    cursor: pointer;
    &:after {
      content: "\e915";
      color: #dcdcdc;
    }
    &.white {
      &:after {
        color: $white-color;
      }
    }
    &.gray {
      &:after {
        color: #cdcdcd;
      }
    }
    &-small {
      top: -10px;
      &.error {
        background-position: 0 -77px;
      }
    }
    &-middle {
      font-size: 28px;
    }
    &-big {
      font-size: 40px;
    }
    &-position {
      &-small {
        right: -45px;
        position: absolute;
        right: -33px;
        top: -5px;
      }
      &-middle {
        position: absolute;
        right: -33px;
        top: -5px;
      }
      &-big {
        position: absolute;
        right: -40px;
        top: -6px;
      }
    }
  }
}
.icon-close-custom {
  position: absolute;
  left: 4px;
  top: 4px;
  font-size: 14px;
}
.switch-hide {
  .icon-action-custom {
    position: absolute;
    right: -20px;
  }
}
.switch-active {
  .icon-close-custom {
    left: -15px;
  }
  .icon-action-custom {
    right: 0;
    z-index: 9;
    position: absolute;
    font-size: 22px;
    &:after {
      color: $content-green-color;
    }
  }
}