@import '~@od/global-resources/scss/settings/index';

#container .voice-input-app {
  background: white;
  right: 50px;
  top: 8px;

  &-container {
    position: relative;

    .voice-input {
      border-right: 1px solid rgba($black,0);
      transition: all 300ms ease-in-out;
      padding-right: 0;
      opacity: 0;
      pointer-events: none;

      .voice-input-trigger {
        transition: all 300ms ease-in-out;
      }

      .compare-popover {
        margin-left: -5px;
        margin-top: -5px;
      }
    }

    &:after {
      content: ' ';
      display: block;
      clear: both;
    }

    &.is-voice-enabled {

      .voice-input {
        border-right: 1px solid rgba($black,0.2);
        cursor: default;
        padding-right: 8px;
        opacity: 1;
        pointer-events: all;
      }

    }

    &.has-text {
      .voice-input {
        border-right: 1px solid rgba($black, 0);
        padding-right: 8px;
        .voice-input-trigger {
          opacity: 0;
          pointer-events: none;
        }
      }
    }
  }
}

#mobileSearchForm {
  .voice-input-app {
    top: 2px;
    opacity: 0;
    pointer-events: none;
    transition: all 250ms ease-in-out;
  }

  &.is-voice-enabled {
    .voice-input-app {
      opacity: 1;
      pointer-events: all;

      .voice-input-app-pulse {
        top: -7px;
        left: -14px;
      }

      .compare-popover {
        margin-left: -8px;
        margin-top: -7px;
      }
    }

  }

  &.has-text {
    .voice-input-app {
      opacity: 0;
      pointer-events: none;
    }
  }
}