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

.at-audio {
  display: flex;
  align-items: center;
  height: $at-audio-size;

  /* prettier-ignore */
  border: 1PX solid $color-border-grey;
  background-color: $color-grey-6;
  border-radius: $border-radius-lg;

  /* elements */
  &__voice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-left: 20px;
    box-sizing: border-box;
    border: 4px solid $at-audio-color;
    border-radius: 50%;

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

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

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

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

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

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

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

  &__slider {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    margin-top: -8px;
  }

  &__time {
    font-size: $at-audio-font-size;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    bottom: -18px;
    padding: 0 30px;
  }
}

@keyframes animTwo {
  0%,
  25% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes animThree {
  0%,
  25%,
  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}