@use 'ej2-base/styles/common/mixin' as *;
@include export-module('speechtotext-layout') {
  .e-speech-to-text.e-btn {
    align-items: center;
    border-radius: $stt-border-radius;
    display: inline-flex;
    font-size: $stt-font-size;
    min-width: $stt-min-width;
    min-height: $stt-min-height;
    padding: $stt-padding;
    @if ($skin-name == 'fluent2') {
      line-height: $stt-btn-line-height;
    }
    &.e-round {
      width: $stt-round-width;
      height: $stt-round-height;
      padding: $stt-round-padding;
    }
    .e-btn-icon {
      font-size: $stt-font-size;
      margin-top: $stt-margin-top;
      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
        line-height: $stt-btn-icon-line-height;
        width: 2em;
      }
    }
    &:disabled {
      pointer-events: none;
    }
    &.e-listening-state {
      animation: listening 1.2s infinite;
    }
  }

  .e-speech-to-text.e-round {
    .e-btn-icon {
      font-size: $stt-btn-font-size;
      @if ($skin-name == 'FluentUI') {
        margin-top: $stt-round-btn-margin-top;
      }
      @if ($skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric-dark') {
        margin-top: $stt-round-btn-margin-top;
      }
    }
  }

  @keyframes listening {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
    50% {
      opacity: .5;
    }
  }
}