@import 'breakpoints';

.v-select{position:relative;font-family:inherit; display: flex; align-items: center; width: 100%}.v-select,.v-select *{box-sizing:border-box}@-webkit-keyframes vSelectSpinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes vSelectSpinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.vs__fade-enter-active,.vs__fade-leave-active{pointer-events:none;transition:opacity .15s cubic-bezier(1,.5,.8,1)}.vs__fade-enter,.vs__fade-leave-to{opacity:0}.vs--disabled .vs__clear,.vs--disabled .vs__dropdown-toggle,.vs--disabled .vs__open-indicator,.vs--disabled .vs__search,.vs--disabled .vs__selected{cursor:not-allowed;background-color:#f8f8f8}.v-select[dir=rtl] .vs__actions{padding:0 3px 0 6px}.v-select[dir=rtl] .vs__clear{margin-left:6px;margin-right:0}.v-select[dir=rtl] .vs__deselect{margin-left:0;margin-right:2px}.v-select[dir=rtl] .vs__dropdown-menu{text-align:right}.vs__dropdown-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;padding:0 0 4px;background:none;border:1px solid rgba(60,60,60,.26);border-radius:4px;white-space:normal}.vs__selected-options{display:flex;flex-basis:100%;flex-grow:1;flex-wrap:wrap;padding:0 2px;position:relative}.vs__actions{display:flex;align-items:center;padding:4px 6px 0 3px}.vs--searchable .vs__dropdown-toggle{cursor:text}.vs--unsearchable .vs__dropdown-toggle{cursor:pointer}.vs--open .vs__dropdown-toggle{border-bottom-color:transparent;border-bottom-left-radius:0;border-bottom-right-radius:0}.vs__open-indicator{fill:rgba(60,60,60,.5);transform:scale(1);transition:transform .15s cubic-bezier(1,-.115,.975,.855);transition-timing-function:cubic-bezier(1,-.115,.975,.855)}.vs--open .vs__open-indicator{transform:rotate(180deg) scale(1)}.vs--loading .vs__open-indicator{opacity:0}.vs__clear{fill:rgba(60,60,60,.5);padding:0;border:0;background-color:transparent;cursor:pointer;margin-right:8px}.vs__dropdown-menu{display:block;box-sizing:border-box;position:absolute;top:calc(100% - 1px);left:0;z-index:1000;padding:5px 0;margin:0;width:100%;max-height:350px;min-width:160px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0,0,0,.15);border:1px solid rgba(60,60,60,.26);border-top-style:none;border-radius:0 0 4px 4px;text-align:left;list-style:none;background:#fff}.vs__no-options{text-align:center}.vs__dropdown-option{line-height:1.42857143;display:block;padding:3px 20px;clear:both;color:#333;white-space:nowrap}.vs__dropdown-option:hover{cursor:pointer}.vs__dropdown-option--highlight{background:#5897fb;color:#fff}.vs__dropdown-option--disabled{background:inherit;color:rgba(60,60,60,.5)}.vs__dropdown-option--disabled:hover{cursor:inherit}.vs__selected{display:flex;align-items:center;background-color:#f0f0f0;border:1px solid rgba(60,60,60,.26);border-radius:4px;color:#333;line-height:1.4;margin:4px 2px 0;padding:0 .25em;z-index:0}.vs__deselect{display:inline-flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-left:4px;padding:0;border:0;cursor:pointer;background:none;fill:rgba(60,60,60,.5);text-shadow:0 1px 0 #fff}.vs--single .vs__selected{background-color:transparent;border-color:transparent}.vs--single.vs--open .vs__selected{position:absolute;opacity:.4}.vs--single.vs--searching .vs__selected{display:none}.vs__search::-webkit-search-cancel-button{display:none}.vs__search::-ms-clear,.vs__search::-webkit-search-decoration,.vs__search::-webkit-search-results-button,.vs__search::-webkit-search-results-decoration{display:none}.vs__search,.vs__search:focus{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.4;font-size:1em;border:1px solid transparent;border-left:none;outline:none;margin:4px 0 0;padding:0 7px;background:none;box-shadow:none;width:0;max-width:100%;flex-grow:1;z-index:1}.vs__search::-webkit-input-placeholder{color:inherit}.vs__search::-moz-placeholder{color:inherit}.vs__search:-ms-input-placeholder{color:inherit}.vs__search::-ms-input-placeholder{color:inherit}.vs__search::placeholder{color:inherit}.vs--unsearchable .vs__search{opacity:1}.vs--unsearchable:not(.vs--disabled) .vs__search:hover{cursor:pointer}.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search{opacity:.2}.vs__spinner{align-self:center;opacity:0;font-size:5px;text-indent:-9999em;overflow:hidden;border:.9em solid hsla(0,0%,39.2%,.1);border-left-color:rgba(60,60,60,.45);transform:translateZ(0);-webkit-animation:vSelectSpinner 1.1s linear infinite;animation:vSelectSpinner 1.1s linear infinite;transition:opacity .1s}.vs__spinner,.vs__spinner:after{border-radius:50%;width:5em;height:5em}.vs--loading .vs__spinner{opacity:1}
.vs__dropdown-toggle,
.vs__dropdown-toggle input,
.vs__dropdown-toggle input:focus{ border: none }
.vs__dropdown-toggle{
  padding-bottom: 0;
  width: 100%;
}
.vs__selected + .vs__search{
  display: none;
}

body.airline-in{
  overflow: hidden;
}
.xtd-search-flight{

  &__wrapper{
    > div{
      overflow-y: scroll;

      @include media-breakpoint-up(md) {
        overflow-y: visible;
      }
    }
  }


  &[v-cloak] {
    display:none;
  }

  @include media-breakpoint-down(md) {
    .btn{
      display: block;
      width: 100%;
      margin-top: .5rem;
      font-size: 90%;
    }
    .btn-primary{
      font-size: 120%;
    }
  }
  &__leg{
    margin-bottom: 1rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    @include media-breakpoint-up(md) {
      align-content: stretch;
      position: relative;
      flex-wrap: nowrap;
    }


    label{
      text-transform: uppercase;
      font-size: 80%;
    }

  }
  &__from,
  &__to{
    flex-grow: 1;
    flex-basis: 100%;
    margin-bottom: 1rem;

    @include media-breakpoint-up(md) {
      flex-basis: 25%;
      display: flex;
      align-content: stretch;
      flex-direction: column;
      margin-bottom: 0;
    }

    .v-select{
      flex-grow: 1;

      .dropdown-toggle{
        height: 100%;
        border: 0;
        position: relative;
        border-radius: 0;

        .selected-tag{
          & + .form-control{
            width: 4px !important;
          }
        }
      }
    }
  }
  &__to{
    @include media-breakpoint-up(md) {
      margin-left: 10px;
    }
  }
  &__pax{
    flex-basis: 120px;
    margin-left: 10px;

    input{
      min-height: 3rem;
    }
    @include media-breakpoint-up(md) {
      flex-basis: 80px;
      display: flex;
      align-content: stretch;
      flex-direction: column;
      input{
        flex-grow: 1;
      }
    }
  }
  &__date{
    flex-grow: 1;
    flex-shrink: 1;

    input{
      min-height: 3rem;
    }
    @include media-breakpoint-up(md) {
      margin-left: 10px;
      display: flex;
      align-content: stretch;
      flex-direction: column;

      flex-basis: 15%;

      input{
        flex-grow: 1;
      }
    }
  }
  &__remove{
    margin-top: 1rem;
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    position: absolute;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid currentColor;
    border-radius: 100px;
    line-height: 1rem;
    text-align: center;
    opacity: 0.75;

    &:hover{
      opacity: 1;
    }

    a,
    a:hover{
      text-decoration: none;
    }
  }
  &__requirements{
    margin-bottom: 1rem;
    position: relative;
  }
  &__airport-select{
    font-size: 90%;
    line-height: 1.3;

    small{
      display: block;
      opacity: 0.6;
    }
  }

  .v-select input[type=search],
  .v-select input[type=search]:focus{
    height: 3rem;
    line-height: 3;
    padding: 0 1rem;
  }
  .v-select .dropdown-toggle .clear,
  .v-select .dropdown-toggle .open-indicator{
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
  .v-select .dropdown-toggle .spinner{
    bottom: auto;
    top: 30%;
  }
  .v-select .dropdown-toggle .open-indicator{
    transform: translateY(-30%);
  }
  .v-select .selected-tag{
    margin: .5rem 0 0 .5rem;
  }
}


.xtd-search-flight{

  &--modal{
    padding: 10vh 2rem;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1200px;
    top: 100%;
    transition: transform 360ms ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__toggle-modal{
    position: absolute;
    height: 3rem;
    line-height: 3rem;
    left: 0;
    right: 0;
    bottom: 100%;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 1rem;
    transition: all 120ms ease;
    cursor: pointer;

    .fa{
      transform: rotate(270deg);
    }
    > div:last-child{
      flex-grow: 1;
    }

  }

  &--modal-opened{
    top: 0;
    bottom: 0;

    .xtd-search-flight__toggle-modal{
      top: 0;
      bottom: auto;
    }
  }


  @include media-breakpoint-up(lg) {

    &--modal{
      padding: 11vh 10vh;
      left: auto;
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      display: block;
    }

    &__toggle-modal{
      display: flex;
      flex-direction: column;
      position: absolute;
      left: 100%;
      transform-origin: bottom left;
      width: 2rem;
      height: auto;
      top: 0;
      bottom: 0;
      line-height: 2rem;
      padding: 0;

      .fa{
        transform: rotate(0deg);
      }

      > div:first-child{
        align-self: flex-start;
        text-align: center;
        width: 100%;
      }
      > div:last-child{
        align-self: flex-end;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 1rem;

        span{
          transform: rotate(270deg) translateX(-100%);
          display: inline-block;
          transform-origin: top left;
          white-space: nowrap;

          strong{
            display: inline-block;
            margin-right: 1rem;
          }
        }
      }
    }

    &--modal-opened{
      transform: translate(100%, -50%);
      box-shadow: 12.25rem 1.375rem 24.75rem 0rem rgba(0, 0, 0, 0.42) !important;
      bottom: auto;

      .xtd-search-flight__toggle-modal{
        top: 0;
        bottom: 0;
      }
    }

  }

}