.ami-toolbar {
  > .ami-button:first-child {
    margin-right: 0;
    border-right: 0;
  }

  > .ami-button:last-child {
    margin-left: 0;
  }
}

button.ami-button,
a.ami-button,
div.ami-button {
  @extend %body-text;
  color: $light-black;
  background-color: $ami-white;
  padding: $font-size-body-text-small 1.666rem;
  border-radius: 0;
  border: 0;

  &:disabled,
  &:hover:disabled {
    background-color: transparentize($ami-white, 0.4);
    cursor: not-allowed;
  }

  &:hover {
    background-color: $ami-beige;
    cursor: pointer;
  }

  &.highlight {
    background-color: $ami-yellow;

    &:disabled {
      background-color: transparentize($ami-yellow, 0.4);
    }

    &:hover:not(:disabled) {
      background-color: $dark-yellow;
    }
  }

  &.selected,
  &.selected:hover {
    background-color: $ami-white;
    color: $dark-grey;
  }

  *:hover:not(:disabled) {
    cursor: pointer;
  }
}

a.ami-button {
  min-height:44px;
  display: inline-block;
}

a.ami-link,
a.ami-link:visited,
a.ami-link:hover,
a.ami-link:active,
span.fake-link {
  color: $ami-yellow;
  padding-bottom: 0.222rem;
  backface-visibility: hidden;
  position: relative;
  white-space: nowrap;
  display: inline-flex;

  &::before,
  &::after {
    content: '';
    transition: all $transition-duration ease;
    position: absolute;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: $ami-yellow;
  }

  &::before {
    left: calc(50%);
  }

  &::after {
    right: calc(50%);
  }

  &:hover {
    &::before,
    &::after {
      width: 50%;
    }
  }

  @include touch {
    &::before,
    &::after {
      width: 50%;
    }

    &:hover {
      &::before,
      &::after {
        width: 0;
      }
    }
  }

  &.darken {
    color: $light-black;

    &::after,
    &::before {
      background-color: $light-black;
    }
  }

  @include from($tablet) {
    white-space: nowrap;
  }
}

input[type=email],
input[type=text] {
  &.ami-input {
    padding-bottom: 0.222rem;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid transparentize($ami-white, 0.4);
    color: $ami-white;
    font-size: $font-size-small;

    &:focus {
      border-bottom-color: $ami-yellow;
    }

    @include touch {
      font-size: 16px; // this is to prevent auto zoom without disabling the browser zoom
    }
  }
}