@use "00-base/configure" as *;

@mixin ma-button-search ($background-color, $color) {
  border: 2px solid;
  display: inline-block;
  letter-spacing: $letter-spacing-large;
  min-height: 46px;
  padding: 0 14px;
  text-transform: uppercase;
  transition: background-color .4s, color .4s, border .4s, fill .4s;
  white-space: nowrap;

  span,
  & > svg {
    display: inline-block;
    vertical-align: middle;
  }

  & > svg {
    height: 20px;
    transition: fill .4s;
    width: 20px;
  }


  background-color: $background-color;

  @if $background-color==$c-white {
    border-color: $c-bd-input !important;
  } @else {
    border-color: $background-color !important;
  }
  color: $color;
  font-size: $fonts-2xsmall;
  font-weight: $fonts-bold;

  &:hover,
  &:focus {
    background-color: $color;

    @if $color==$c-white {
      border-color: $c-bd-input !important;
    } @else {
      border-color: $color !important;
    }
    color: $background-color;

    & > svg {
      fill: $background-color;
    }
  }

  & > svg {
    fill: $color;
  }
}

.ma__button-search {

  //primary button search

  @include ma-button-search($c-primary-alt, $c-white);

  //secondary button search

  &--secondary {

    @include ma-button-search($c-white, $c-primary-alt);
  }
}