.reactmic {
  overflow: hidden;
  position: relative;
}

.block {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.76);
  border-radius: 4px;
  width: 204px;
  height: 44px;
  justify-content: space-around;

  .recording-icon {
    background: #d93026;
    width: 10px;
    flex: 0 0 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    margin-left: 16px;
  }

  .mybutton {
    justify-self: flex-end;
    display: flex;
    justify-content: flex-end;
    padding-right: 12px;
  }

  .button {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 24px;
    height: 24px;
    text-align: center;
    width: 48px;
    cursor: pointer;
    color: #fff;
    &.cancel {
      background-color: #626262;
    }
    &.primary {
      background-color: #0070cc;
      margin-left: 8px;
    }
    &.disable {
      cursor: not-allowed;
      background-color: #ccc;
      margin-left: 8px;
    }
  }
}

.icon-buttons {
  :global {
    .next-icon {
      margin-left: 4px;
      cursor: pointer;
    }
  }
}

.duration {
  font-size: 14px;
  color: #fff;
  line-height: 20px;
  flex: 1;
}