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

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

// Button action
.icon {
  &-legend {
    @include iconmoon();
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #cdcdcd;
    display: inline-block;
    .icon-action {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    &.title {
      margin-right: 48px;
    }
    .icon-action-clock {
      &:before {
        content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #88bd23;
        bottom: 3px;
        left: 4px;
      }
    }
    &-title {
      font-size: 10px;
      color: #cdcdcd;
      font-family: $primary-font-light !important;
      position: absolute;
      padding-left: 38px;
      line-height: 32px;
      left: 0;
    }
  }
}