@import '../variables/default.scss';
@import '../mixins/index.scss';

$Component: '.at-record';

#{$Component} {
  .translate-btn {
    margin-left: $spacing-h-md;
  }

  .at-list__item {
    .item-icon {
      margin-right: 10px;
    }
  }

  &_children-wrapper {
    display: flex;
  }

  &_audio {
    border-radius: 90px;
    background: $color-brand;
    width: 220px;
    height: 54px;
    display: flex;
    align-items: center;
    color: $color-white;

    &__duration {
      font-size: $font-size-sml;
    }

    &__voice {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 54px;
      margin-left: $spacing-h-md;
      box-sizing: border-box;
      border-radius: 50%;

      &-icon {
        position: relative;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        overflow: hidden;
        transform: rotate(-45deg) translate3d(2px, 2px, 0);

        &-circle {
          box-sizing: border-box;
          border: 4px solid $color-white;
          border-radius: 50%;
          position: absolute;
        }

        &-one {
          background: $color-white;
          width: 12px;
          height: 12px;
          top: -6px;
          left: -6px;
        }

        &-two {
          width: 36px;
          height: 36px;
          top: -20px;
          left: -20px;

          &-anim {
            opacity: 0;
            animation: recordAnim2 2s infinite 0s;
          }
        }

        &-three {
          width: 50px;
          height: 50px;
          top: -25px;
          left: -25px;

          &-anim {
            opacity: 0;
            animation: recordAnim3 2s infinite 0s;
          }
        }
      }
    }
  }

  &_loading {
    display: flex;
    justify-content: center;

    &_icon {
      font-size: 150px;
      color: $color-brand;
    }

    &_line-container {
      width: 74px;
      margin-left: $spacing-h-sm;

      .line-item {
        border-radius: 90px;
        height: 10px;
        background: $color-brand;
        margin: 12px auto 0;
        opacity: 0;
      }

      .line-item-1 {
        width: 40%;
        opacity: 1;
      }
      @for $i from 2 through 4 {
        .line-item-#{$i} {
          animation: recordAnim#{$i} 2.5s infinite 0s;
          width: 20% * $i + 20%;
        }
      }
    }
  }

  &_float-layout {
    text-align: center;

    .hint-text {
      font-size: $font-size-sml;
      margin-bottom: $spacing-v-lg;
      margin-top: $spacing-v-md;
      color: $color-grey-2;
    }

    .layout-duration {
      font-size: $font-size-caption;
      margin-bottom: 30px;
    }

    .stop-btn {
      margin-top: 40px;
    }
  }
}
@keyframes recordAnim2 {
  0%,
  25% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes recordAnim3 {
  0%,
  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes recordAnim4 {
  0%,
  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}