@import "../../../sass/webpack_deps";
@import "../../../sass/objects/datepicker";

$hotels-breakpoint-large-min: em(860px);
$hotels-color: $color-white;
$hotels-form-height: 4.4rem;
$hotels-form-width: 784;
$hotels-max-width: 1170;

.hotels {
  @include segment();
  background-image: url("https://assets.staticlp.com/destinations-next/images/hotels-default.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: ($gutter * 2); // Override segment() padding
  padding-top: ($gutter * 2) - .6rem; // Override segment() padding
  position: relative;

  @media (min-width: $min-720) {
    padding-bottom: ($gutter * 3);
    padding-top: ($gutter * 3) - 1rem;
  }

  @media (min-width: $min-1080) {
    padding-bottom: 26.9rem;
    padding-top: 20.5rem;
  }

  .picker__wrap {
    width: auto;
  }

  .picker__frame {
    margin-top: 1.5rem;
    position: absolute;

    select,
    tbody {
      color: $titlegray;
    }
  }

  &__button-container {
    bottom: 2.5rem;
    color: $color-white;
    font-size: 1.2rem;
    left: calc(50% - (252px / 2));
    position: absolute;

    @media (min-width: $min-1080) {
      bottom: 5rem;
    }
  }

  &__more {
    color: $color-white;
    transition: color $animation-speed;

    &:hover,
    &:active,
    &:focus {
      color: rgba($color-white, .6);
    }

    .icon-chevron-right {
      &::before {
        bottom: .2px;
        font-size: .55rem;
        position: relative;
      }

      &:first-child {
        margin-right: -5.5px;
      }
    }
  }
}

.hotels__container {
  @include container-padded();
}

.hotels__header {
  color: $hotels-color;
  margin-bottom: 4.3rem;
  text-align: center;
}

.hotels__title {
  @include h1(2.5rem, $hotels-color);
}

.hotels__text {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: (21 / 16);
  margin: 0 auto;
  max-width: 50rem;
}

.hotels__search {
  margin: 0 auto;
  width: 100%;

  @media (max-width: $max-720) {
    max-width: 30rem;
  }

  @media (min-width: $min-720) {
    height: $hotels-form-height;
  }

  @media (min-width: $hotels-breakpoint-large-min) {
    max-width: 78.4rem;
  }

  :focus {
    outline: none;
  }
}

.hotels__search__field {
  font-size: 1.2rem;
  height: $hotels-form-height;

  @media (max-width: $max-720) {
    margin-top: 1.5rem;

    &:first-child {
      margin-top: 0;
    }
  }

  @media (min-width: $min-720) {
    float: left;
    width: percentage(175 / $hotels-form-width);
  }

  @media (min-width: $hotels-breakpoint-large-min) {
    width: 17.5rem;
  }

  + .hotels__search__field {
    @media (min-width: $min-720) {
      margin-left: percentage(29 / $hotels-form-width);
    }

    @media (min-width: $hotels-breakpoint-large-min) {
      margin-left: 2.9rem;
    }
  }
}

.hotels__search__label {
  @include visuallyhidden("focusable");
}

.hotels__search__control {
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iN3B4IiBoZWlnaHQ9IjdweCIgdmlld0JveD0iMCAwIDcgNCI+DQogIDxwb2x5Z29uIGZpbGw9IiNmZmZmZmYiIHBvaW50cz0iNywwIDAsMCAzLjUsNCAiLz4NCjwvc3ZnPg0K");
  background-position: calc(100% - 15px) 50%;
  background-repeat: no-repeat;
  border: 1px rgba($hotels-color, .44) solid;
  border-radius: .2rem;
  color: $hotels-color;
  cursor: pointer;
  display: inline-block;
  font-size: 1.6rem;
  height: $hotels-form-height;
  padding: .4rem 3.5rem 0 1.3rem;
  position: relative;
  transition: border-color $animation-speed;
  width: 100%;
  z-index: z("default");

  @include placeholder {
    color: $hotels-color;
    opacity: 1; // Firefox
  }

  &:hover,
  &:focus {
    border-color: rgba($hotels-color, .66);
  }

  // hide select dropdown arrow in IE10 +
  &::-ms-expand {
    display: none;
  }

  option {
    color: $darkgray;
  }
}

.hotels__search__button {
  @include button();
  width: 100%;

  @media (max-width: $max-720) {
    margin-top: 1.5rem;
  }

  @media (min-width: $min-720) {
    float: left;
    margin-left: percentage(21 / $hotels-form-width);
    max-width: 18rem;
    width: percentage(180 / $hotels-form-width);
  }

  @media (min-width: $hotels-breakpoint-large-min) {
    margin-left: 2rem;
    width: 18rem;
  }
}