.sttCompWrapper {
  width: 100%;
  height: 100%;

  position: relative;

  cursor: pointer;

  i {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :global {
    .loadingio-spinner-eclipse-block {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;

      width: 100%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
      // background: rgba(255, 255, 255, 0);
    }
    .ldio {
      width: 100%;
      height: 100%;
      position: relative;
      transform: translateZ(0) scale(1);
      backface-visibility: hidden;
      transform-origin: 0 0; /* see note above */
    }
  }
}

.rotateAnim {
  position: absolute;
  top: 8%;
  left: 8%;
  z-index: 1;
  animation: rotate 1s linear infinite;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  box-shadow: 0 2px 0 0 #504bff;
  transform-origin: center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.recordingIcon {
  background-color: rgba(22, 93, 255, 0.1);
}

.btnIcon {
  font-size: 20px;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  border-radius: 100%;

  // color: #ccc;
  // background-color: rgba(204, 204, 204, 0.3);
  &.disabled {
    color: #ccc;
    // cursor: not-allowed;
  }
}

.mic {
  // color: #fff;
  // background: linear-gradient(90deg, #504BFF 0%, #8773FF 100%);
  &:hover {
    color: var(--beyond-color-primary);
  }
}
