/// Buttons

.btn,
input.btn {
  margin: 0;
  outline: 0;
  overflow: visible;
  height: auto;
  font-family: $font-family;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: capitalize;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
  display: inline-block; /// ie7 inline-block
  zoom: 1;
  *display: inline;
  border: 1px solid $blue;
  background-color: $blue;
  color: $white;
  padding: 0 12px;
  @include font-size(12px);
  line-height: 44px;
  border-radius: $border-radius;
  min-height: 44px;

  /// Primary Button
  &.primary:not([disabled]) {
    background-color: $blue;
    color: $white;

    &:hover {
      background: $blue-dark;
      border-color: $blue-dark;
    }
  }

  /// Secondary Button
  &.secondary {
    background-color: $white;
    color: $blue;

    &:hover {
      background: $blue-light;
      color: $blue-dark;
    }
  }

  /// Small Size button
  &.sm-txt {
    @include font-size(12px);
    padding: 0 8px;
    border-radius: $border-radius - 1;
  }

  /// Medium Size button
  &.med-txt {
    @include font-size(15px);
    padding: 0 10px;
    border-radius: $border-radius;
  }

  /// Large Size button
  &.lg-txt {
    @include font-size(18px);
    padding: 0 20px;
    border-radius: $border-radius + 1;
  }

  /// Large size button with icon
  &.lg-with-icon {
    @include font-size(18px);
    padding: 0 20px;
    border-radius: $border-radius + 1;
    background-color: $blue;
    color: $white;
   /// background-image: url(''); ------------ url of the icon
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding-left: 34px;
  }

  /// Active, Hover states
    &:active {
      opacity: 1;
    }

  /// Disable button/ primary as well as secondary button
  &.secondary[disabled],
  &[disabled],
  &[disabled] * {
    background-color: $gray-light;
    border-color: $gray-light;
    color: $gray;
    &:hover {
      cursor: not-allowed;
      opacity: 1;
    }
  }

  ///Fixed width, Full width, Auto-width, Half Width, Centered
  &.fixed-width {
    width: 172px;
    text-align: center;
  }
  &.full-width {
    width: 100%;
    text-align: center;
  }
  &.auto-width {
    display: inline-block;
    width: auto;
    text-align: center;
  }
  &.half-width {
    display: table;
    margin: 0 auto;
    width: 50%;
  }
  &.centered {
    display: table;
    margin: 0 auto;
  }

  &.link-style {
    color: $blue;
    background-color: transparent;
    border-color: transparent;
    text-transform: none;
    padding: 0 4px;
    min-height: unset;
    line-height: normal;

    &:hover {
      color: $blue-dark;
      background: transparent;
    }
  }

  /// Checkout button
  &.checkout {
    background-color: $blue;
    color: $white;
    background-image: url('/images/us/od/checkout/checkout-lock.png');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    padding-left: 34px;
  }
}

a.btn {
  &:hover {
    color: $white;
    background: $blue-dark;
  }

  &.link-style:hover {
    color: $blue-dark;
    background: transparent;
  }
}