$recordColor: #996c23;

@keyframes load {
  from {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
}

.jr-record {
  position: relative;
  display: inline-block;
  &__content {
    cursor: pointer;
    @include flex-justify(center);
    height: 40px;
    border-radius: 20px;
    font-size: 16px;
    background-color: #ffea00;
    border: solid 1px #996c23;
    &--inactive,
    &--recording,
    &--uploading {
      width: 230px !important;
    }
    &--inactive {
      justify-content: flex-start;
      background-color: #fff;
      border: dashed 1px #d4d1c3;
      img {
        margin: 0 10px;
      }
    }
    &--complete {
      position: relative;
      padding-left: 14px;
      justify-content: flex-start;
    }
  }

  &__text {
    color: $recordColor;
    margin-left: 5px;
  }

  &__story {
    line-height: 18px;
  }
  .icon-wrong-warning {
    font-size: 16px;
    position: absolute;
    right: -30px;
    top: 10px;

    font-size: $--font-l;
    color: #abc0ba;
    &:hover {
      color: $--color-c11;
    }
  }
  &__err,
  &__recording {
    &-text {
      position: absolute;
      right: -160px;
      top: 10px;
      @extend %err;
    }
  }

  &__audio {
    &-err {
      @extend %err;
      position: relative;
      line-height: 38px;
    }
  }

  &__recording {
    &-text {
      right: -140px;
      color: #000;
    }
    &-stop {
      transition: 0.3s;
      color: #3146bf;
      &:hover {
        color: #0090ff;
      }
    }
  }

  &__reupload,
  &__recording-stop {
    cursor: pointer;
    text-decoration: underline;
  }

  &__loading {
    width: 20px;
    height: 20px;
    border: 3px solid $recordColor;
    border-bottom: #fff 3px solid;
    border-radius: 50%;
    animation: load 1s infinite linear;
  }
}

%err {
  user-select: none;
  font-size: 14px;
  color: #f35100;
}