$button-font-size: 12px;
$button-line-height: 15px;
$button-font-weight: 700;
$button-padding-x: 16px;
$button-padding-y: 8.5px;
$button-border-width: 1px;
$button-height: 30px;
$button-large-height: 50px;
$button-margin-width: 15px;
$button-confirm-icon-width: 15px;
$button-confirm-margin-bottom: 20px;
$base-font-family: 'Lato', Arial, Helvetica, sans-serif;
$border-radius: 2px;

@mixin button-focus($offset) {
  background-color: $color-light-grey;
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: $offset;
}

.coveo-button {
  display: inline-block;
  width: 100%;
  height: $button-height;
  padding: $button-padding-y $button-padding-x;

  color: $color-teal;
  font-family: $base-font-family;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  line-height: $button-line-height;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;

  background-color: white;
  border: $button-border-width solid $color-grey;
  border-radius: $border-radius;

  cursor: pointer;

  .icon {
    fill: $color-teal;
  }

  &:hover, &:focus {
    text-decoration: none;
  }

  &:focus {
    @include button-focus(-2px);
  }

  & + .coveo-button {
    margin-left: $button-margin-width;
  }
}