@import 'Variables';

.CoveoSearchButton {
  color: white;
  border: 1px solid $color-light-contrast-grey;
  border-left: none;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  height: 50px;
  width: 60px;
  cursor: pointer;
  line-height: 0;
  &:before {
    content: '';
    vertical-align: middle;
    height: 100%;
    display: inline-block;
  }

  .coveo-search-button,
  .coveo-search-button-loading {
    vertical-align: middle;
    animation: none;
    display: inline-block;
  }

  .coveo-search-button-loading-svg {
    display: none;
  }

  &:hover .coveo-magnifier-circle-svg {
    fill: $color-active-yellow;
  }
}

.coveo-search-button-svg {
  width: 18px;
  height: 18px;
  color: $color-greyish-teal-blue;
}

.coveo-executing-query .CoveoSearchButton {
  .coveo-search-button-svg {
    display: none;
  }

  .coveo-search-button-loading-svg {
    display: inline;
    color: $color-greyish-teal-blue;
    width: 18px;
    height: 18px;
    @include animation-name(coveo-spin);
    @include animation-timing-function(linear);
    @include animation-duration(1s);
    @include animation-iteration-count(infinite);
  }
}
