flylocal-web/components/FlightsFlyout.vue

<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 flights
      </span>
    </NuxtLink>
  </div>
</template>

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

<style scoped>
.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;
}

</style>