@mixin button-colors {
  background-color: $button-bg-color;
  border-color: $button-border-color;
  color: $button-text-color;
}

@mixin button-focus-colors {
  background-color: $button-bg-color-hover;
  border-color: $button-border-color-hover;
  color: $button-text-color-hover;
}

@mixin cta-button-colors {
  background-color: $button-cta-bg-color;
  border-color: $button-cta-bg-color;
  color: $button-cta-text-color;
}

@mixin icon-button-colors {
  background-color: transparent;
  border-color: transparent;
  color: $icon-button-color;
}

@mixin icon-button-focus-colors {
  background-color: $button-bg-color-hover;
  border-color: $button-border-color;
  color: $button-text-color-hover;
}

@mixin icon-cta-button-colors {
  background-color: $button-cta-bg-color;
  border-color: transparent;
  color: $button-cta-text-color;
}

.ias-button {
  @include disable-text-selection;
  @include single-line;

  background-color: $button-bg-color;
  border: 1px solid $button-border-color;
  border-radius: $border-radius;
  color: $button-text-color;
  cursor: pointer;
  display: inline-block;
  font-size: $button-font-size;
  min-width: $button-min-width;
  padding: $button-padding;
  text-align: center;
  text-decoration: $button-text-transform;
  vertical-align: middle;

  &:focus {
    outline: none;
  }

  &:focus,
  &:hover {
    @include button-focus-colors;
  }

  &[disabled],
  &.ias-disabled {
    @include button-colors;
    @include disabled-state;
  }

  &.ias-cta {
    @include cta-button-colors;

    &:focus,
    &:hover {
      @include button-focus-colors;
    }

    &[disabled],
    &.ias-disabled {
      @include cta-button-colors;
    }
  }

  &.ias-icon-button {
    min-width: 0;
    padding: 0;

    @include icon-button-colors;

    &:focus,
    &:hover {
      @include icon-button-focus-colors;
    }

    &[disabled],
    &.ias-disabled {
      @include icon-button-colors;
    }

    &.ias-cta {
      @include icon-cta-button-colors;

      &:focus,
      &:hover {
        @include icon-button-focus-colors;
      }

      &[disabled],
      &.ias-disabled {
        @include icon-cta-button-colors;
      }
    }

    &.ias-selected {
      color: $icon-button-color-selected;
      opacity: 1;
    }

    .ias-icon,
    .svg-icon {
      display: block;
    }
  }

  &.ias-icon-text-button {
    padding: $button-padding-with-icon;

    span {
      vertical-align: middle;
    }
  }

  &.ias-menu-toggle {
    .ias-icon,
    .svg-icon {
      font-size: inherit;
    }
  }

  i + span,
  span + i {
    margin-left: $button-inline-icon-padding;
  }

  i {
    vertical-align: middle;
  }
}

/* Stop FF buttons from being larger. http://stackoverflow.com/questions/7928521 */
button::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}

a.ias-button {
  margin-left: 0;
}


[dir="rtl"] {
  .ias-button {
    i + span,
    span + i {
      margin-left: 0;
      margin-right: $button-inline-icon-padding;
    }
  }

  a.ias-button {
    margin-right: 0;
  }
}