@import "../../constants/index.scss";

:local {
  .richText {
    position: relative;

    &Wrapper {
      position: relative;
      overflow: hidden;
    }

    &BorderBottom {
      border-radius: 8px 8px 0px 0px;
    }

    textarea,
    input {
      margin-top: 44px;
    }

    &Heading {
      display: flex;

      p {
        color: #666;
        font-size: 12px;
        font-weight: 600;
        margin: 0 8px 0 2px;
      }
    }

    &Counter {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 2px 4px 0;
      font-size: 12px;
      opacity: 0.5;
    }
  }

  .headerItems {
    position: absolute;
    display: flex;
    padding: 4px 10px;
    top: 26px;
    border-bottom: 1px solid #ddd;
    left: 1px;
    z-index: 999;
    width: 100%;
    align-items: center;

    > * {
      margin-right: 8px;
    }
  }

  .speakerIcon {
    cursor: pointer;
    color: #666;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: 0.2s ease-out;
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }

    #wave3 {
      opacity: 0;
    }

    svg path {
      transition: 1s ease-out;
    }

    &.speaking {
      opacity: 1;
      svg {
        overflow: visible;
        path {
          fill: darken($primary-color, 10);
        }
      }

      @for $i from 1 through 3 {
        svg :global(#wave#{$i}) {
          animation: soundwave 1s ease-out infinite;
          animation-delay: 0.2s * $i;
        }
      }
    }
  }
}