// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
//    and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
// 3. Improve usability and consistency of cursor style between image-type
//    `input` and others.
button,
html input[type='button'], // 1
input[type='reset'],
input[type='submit'] {
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

// Re-set default cursor for disabled elements.
button[disabled],
html input[disabled] {
  cursor: default;
}

// Address `overflow` set to `hidden` in IE 8/9/10/11.
button {
  overflow: visible;
  font-family: inherit;
}

.btn {
  @include tui-btn-color($color-red-400, $color-white, $color-red-300);
  @include font-size(18);
  line-height: $line-height-input;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: none;
  padding: $margin-normal $margin-triple;
  border-radius: $border-radius-input;
  min-height: $margin-quadruple;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: .025em;

  &:hover {
    text-decoration: none;
  }

  &.ghost-white {
    @include tui-btn-ghost($color-white);
  }

  &.white {
    @include tui-btn-color($color-white, $color-blue-400, $color-beige-100);
    background: $color-white;
    text-transform: unset;
    padding: $margin-normal;

    &.dark-blue {
      @include tui-btn-color($color-white, $color-blue-450, $color-white);
    }
  }

  &.ghost-brown {
    @include tui-btn-ghost($color-grey);
  }

  &.ghost-blue,
  &.ghost-gray {
    @include tui-btn-ghost($color-blue-500);
  }

  &.btn-tag {
    @include tui-btn-color($color-blue-100, $color-blue-400, $color-blue-100);
  }

  //old button green color - deprecated
  &.btn-primary {
    @include tui-btn-color(darken($btn-primary-bg, 10%), $btn-primary-color, $btn-primary-bg);
  }

  &.btn-function {
    @include tui-btn-color($color-blue-500, $color-white, $color-tui-dark-blue-highlight);
  }

  &.btn-light-blue {
    background: $color-blue-200;
    color: $color-blue-500;

    &:focus,
    &:hover,
    &:active {
      background: lighten($color-blue-200, 15%) linear-gradient($color-blue-200, $color-blue-100);
    }
  }

  &.btn-block {
    padding-left: $margin-normal;
    padding-right: $margin-normal;
  }
}

.btn-icon {
  @include tui-btn-color(darken($color-white, 5%), $color-link-blue, $color-white);
  padding-left: $margin-normal;
  padding-right: $margin-normal;
  text-transform: none;

  .pictogram {
    display: inline-block;
    margin-right: 0;
    vertical-align: -.35em;
  }

  .text {
    display: none;
  }

  @include breakpoint(sm) {
    .pictogram {
      margin-right: $margin-half;
    }

    .text {
      display: inline;
    }
  }

  /* stylelint-disable selector-class-pattern */
  .pictogram-heart,
  .pictogram-heart--fill {
    color: $color-red-400;
  }
  /* stylelint-enable */

  &.icon-pictures:before,
  .icon-pictures:before {
    margin-right: 5px;
    margin-left: -10px;
  }
}

.favourite-heart-container {
  margin: 0;
}

.btn-favorite,
.favourite-heart-container .btn {
  .pictogram-heart {
    display: inline-block;
  }
  /* stylelint-disable selector-class-pattern */
  .pictogram-heart--fill {
    display: none;
  }
  /* stylelint-enable */

  &.active {
    .pictogram-heart {
      display: none;
    }
    /* stylelint-disable selector-class-pattern */
    .pictogram-heart--fill {
      display: inline-block;
    }
    /* stylelint-enable */
  }
}

.btn-lg {
  @include font-size(20);
  line-height: 1.2;
  min-height: 54px;
  padding: $margin-normal $margin-quadruple;
}

.btn-sm {
  @include font-size(14);
  line-height: 1.3;
  padding: $margin-half $margin-quadruple;
  min-height: $margin-triple;
}

.btn-block {
  @extend %flexbox-row;
  width: 100%;

  + .btn-block {
    margin-top: $margin-normal;
  }
}

.btn-show-next {
  border: 0;
  @include font-size(12);

  i {
    vertical-align: middle;
  }
}

button > div {
  display: inline-block;
}

.wf-show-more-hotels,
.cux-show-more {
  margin-bottom: $margin-double;
}

@import 'button-loading';

.favorite-button {
  margin: $margin-double 0;
}

.flex-right-button {
  white-space: nowrap;
  margin-top: $margin-normal;
  width: 100%;

  @include breakpoint(sm) {
    margin-top: 0;
    margin-left: $margin-normal;
  }
}

.blue {
  .btn-icon,
  .favourite-heart-container .btn {
    background: $color-blue-100;
    min-width: 0;
    min-height: 0;
    padding: $margin-half;
    margin: 0;

    .text {
      display: none;
    }

    .pictogram-heart {
      margin: 0;
      color: $color-blue-400;

      &--fill {
        margin: 0;
      }
    }
  }
}