<template>
  <div class="flyout flyout--book">
    <ChosenFlights :selected-orig="selectedOrig" :selected-dest="selectedDest" />
    <NuxtLink
      :to="'/dates/' + selectedOrig.iata + '/' + selectedDest.iata"
      :class="['btn btn--primary',{'btn--empty': !selectedOrig.iata || !selectedDest.iata}]"
    >
      <span :class="['btn__content']">
        see fights
      </span>
    </NuxtLink>
  </div>
</template>

<script>
export default {
  props: {
    selectedOrig: {
      type: [Object],
      default () {
        return {}
      }
    },
    selectedDest: {
      type: [Object],
      default () {
        return {}
      }
    }
  }
}
</script>

<style>
.flyout {
  background: #007fff;
  border-radius: 3rem 3rem 0 0;
  padding: 3rem;
  pointer-events: all;
  width: clamp(450px, 50vw, 400px);
  display: flex;
  flex-direction: column;
}

.flyout .btn.btn--primary {
  background: white;
  color: black;
}

.flyout .btn.btn--primary:hover {
  background: #00ca00;
  color: #fff;
}

.btn__content {
  transition: width 0s 5s;
}

.btn.btn--empty {
  background: lightgray;
}

.btn.btn--large {
  font-size: 2rem;
}

/* @media only screen and (max-width: 768px) {
  .btn.btn--large {
    font-size: 1rem;
  }
} */

.flyout .chosen-cols {
  background: none;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

.flyout .chosen-col {
  padding: 0;
}

.flyout .chosen-cols h1 {
  color: white;
  font-size: 2.7rem;
}

.flyout .chosen-cols label {
  color: white;
}

.flyout .chosen-cols svg {
  stroke: white;
}

</style>
