<template>
  <main class="gosubs-content gosubs-content--thin">
    <section>
      <header class="section-header">
        <div class="section-header__icon">
          <icon-checkmark/>
        </div>

        <h2 class="section-header__content">
          <span class="section-header__title">Your order is</span>
          <span class="section-header__subtitle">confirmed</span>
        </h2>
      </header>
    </section>  

    <section class="section">
      <h2 class="section__title">What happens next</h2>

      <ul class="timeline">
        <li class="timeline__item">
          <div class="timeline__icon">
            <icon-wand class="timeline__svg"/>
          </div>
          <div class="timeline__content">
            <strong class="timeline__checkpoint">Pick your design</strong>
            <p class="timeline__text">Click the show my dashboard button at the end of the page and go to "my next order" tab to choose your month 1 phone case!</p>
          </div>
        </li>
        
        <li class="timeline__item">
          <div class="timeline__icon">
            <icon-case class="timeline__svg"/>
          </div>
          <div class="timeline__content">
            <strong class="timeline__checkpoint">Order sent to production</strong>
            <p class="timeline__text">At this step, our stylist Remy prints your phone case with a lot of care and brings it to life for the very first time!</p>
          </div>
        </li>
        
        <li class="timeline__item">
          <div class="timeline__icon">
            <icon-bag class="timeline__svg"/>
          </div>
          <div class="timeline__content">
            <strong class="timeline__checkpoint">Your order is shipped out</strong>
            <p class="timeline__text">Here, your little package filled with full of surprises is packed with love by Rebecca and is shipped out to you!</p>
          </div>
        </li>
      </ul>
    </section>

    <section class="section review" v-if="subscription && payment && program && material">
      <div class="review__item">
        <h2 class="review__title">Subscription Details</h2>
        <p class="review__details">Plan: <strong>{{ program.title }}</strong></p>
        <p class="review__details" v-if="program.trial">Trial price (first month): <strong>{{formattedPrice(program.trial_price)}}</strong></p>
        <p class="review__details">Price: <strong>{{formattedPrice(program.price)}}</strong></p>
        <p class="review__details">Device: <strong>{{ materialPublicName }}</strong></p>
        <p class="review__details review__details--update">
          Would like to update your device?
          <a @click.prevent="openDeviceModal" title="Update device" class="review__details-link">
            Change Device
          </a>
        </p>
      </div>
      <div class="review__item">
        <h2 class="review__title">Customization Information</h2>
        <p class="review__details">First name: <strong>{{ subscription.first_name }}</strong></p>
        <p class="review__details">Last name: <strong>{{ subscription.last_name }}</strong></p>
        <p class="review__details">Email: <strong>{{ subscription.email }}</strong></p>
        Would you like to update your customization names?
        <a @click.prevent="openCustomizationModal" title="Update address" class="review__details-link">
          Change Name
        </a>
      </div>
      <div class="review__item">
        <h2 class="review__title">Delivery Address</h2>
        <p class="review__details">{{ payment.address_line_1 }}</p>
        <p class="review__details">{{ payment.address_line_2 }}</p>
        <p class="review__details">{{ formattedAddress }}</p>
        <p class="review__details">{{ payment.country_code }}</p>
        <p class="review__details review__details--update">
          Wrong address?
          <a @click.prevent="openModal" title="Update address" class="review__details-link">
            Change Address
          </a>
        </p>
      </div>
    </section>

    <section class="section">
      <a @click.prevent="redirectToDashboard" title="Show my dashboard" class="section__btn">Show my dashboard</a>
    </section>
      <modal
        ref="modal"
        :open="modalOpened"
        :content-class="'subs-modal--addressupdate'"
        @close="closeModal"
      >
        <template slot="title">
          Change address
        </template>

        <template slot="body">
          <form class="float-form" ref="form">
            <floating-label :inputId="'address[address_line_1]'" :inputLabel="'Street address*'" v-model="address.address_line_1" />
            <floating-label :required="false" :inputId="'address[address_line_2]'" :inputLabel="'Apt., ste., bldg'" v-model="address.address_line_2" />
            <floating-label :inputId="'address[admin_area_2]'" :inputLabel="'City*'" v-model="address.admin_area_2" />
            <floating-label :inputId="'address[admin_area_1]'" :inputLabel="'State/Region/Province*'" v-model="address.admin_area_1" />
            <floating-label :inputId="'address[postal_code]'" :inputLabel="'Zip code*'" v-model="address.postal_code" />

            <div class="float-label float-label--selectbox filled">
              <select id="address6" class="float-label__select" name="address[country_code]" v-model="address.country_code" required>
                <option v-for="country in countrieOptions" :key="country.iso" :value="country.iso">
                  {{ country.name }}
                </option>
              </select>
              <label for="address6" class="float-label__text">Country</label>
            </div>
          </form>
        </template>

        <template slot="footer">
          <button type="button" class="subs-modal__btn subs-modal__btn--cancel" @click="closeModal">No, cancel</button>
          <button type="button" class="subs-modal__btn subs-modal__btn--confirm" @click="submitAddress">
            <dots-loader v-if="confirmChange"/>
            <span v-else>Yes, confirm</span>
          </button>
        </template>
      </modal>

      <modal
          ref="modal"
          :open="deviceModalOpened"
          :content-class="'subs-modal__wrapper--deviceupdate'"
          @close="closeDeviceModal"
        >
          <template slot="title">
            Change device
          </template>

          <template slot="body">
            <form class="float-form">
              <div class="float-label float-label--selectbox filled">
                <select id="device" class="float-label__select" name="device" v-model="selectedMaterial" required>
                  <option
                      v-for="materialOption in program.materials"
                      :key="materialOption.slug"
                      :value="materialOption.slug"
                      >{{materialOption.public_name}}</option>
                  </select>
                </select>
                <label for="device" class="float-label__text">Device</label>
              </div>
            </form>
          </template>

          <template slot="footer">
            <button type="button" class="subs-modal__btn subs-modal__btn--cancel" @click="closeDeviceModal">No, cancel</button>
            <button type="button" class="subs-modal__btn subs-modal__btn--confirm" @click="updateDevice">
              <dots-loader v-if="confirmChange"/>
              <span v-else>Yes, confirm</span>
            </button>
          </template>
        </modal>
      <modal
          ref="modal"
          :open="customizationModalOpened"
          :content-class="'subs-modal__wrapper--deviceupdate'"
          @close="closeCustomizationModal"
        >
        <template slot="title">
          Change customization
        </template>

        <template slot="body">
          <form ref="profileForm" class="float-form">
            <floating-label :inputId="'profile[first_name]'" :inputLabel="'First name*'" v-model="profile.first_name"/>
            <floating-label :inputId="'profile[last_name]'" :inputLabel="'Last name*'" v-model="profile.last_name"/>
          </form>
        </template>

        <template slot="footer">
          <button type="button" class="subs-modal__btn subs-modal__btn--cancel" @click="closeCustomizationModal">No, cancel</button>
          <button type="button" class="subs-modal__btn subs-modal__btn--confirm" @click="submitCustomization">
            <dots-loader v-if="confirmChange"/>
            <span v-else>Yes, confirm</span>
          </button>
        </template>
      </modal>

  </main>
</template>

<script>
import { mapState } from 'vuex'
import IconBag from './icons/bag'
import IconWand from './icons/wand'
import IconCase from './icons/case'
import IconCheckmark from './icons/checkmark'
import Modal from '../shared/Modal'
import DotsLoader from '../shared/DotsLoader'
import FloatingLabel from '../shared/FloatingLabel'
import countries from '../utils/countries'
export default {
  name: 'ConfirmationPage',
  components: {
    IconBag,
    IconWand,
    IconCase,
    IconCheckmark,
    Modal,
    DotsLoader,
    FloatingLabel
  },
  data() {
    return {
      selectedMaterial: null,
      confirmChange: false,
      address: null,
      modalOpened: false,
      success: true,
      deviceModalOpened: false,
      customizationModalOpened: false,
      profile: null
    }
  },
  computed: {
    ...mapState(['subscription', 'payment', 'program', 'material']),
    formattedAddress() {
      return `${this.payment.admin_area_1}, ${this.payment.admin_area_2} ${this.payment.postal_code}`
    },
    materialPublicName() {
      return this.material.public_name || this.material.publicName
    },
    countrieOptions () {
      return countries
    }
  },
  beforeRouteEnter (_to, _from, next) {
    next(vm => {
      vm.confirmedOrderEvent()
    })
  },
  created() {
    this.resetMaterial()
    this.resetAddress()
    this.resetProfileInfo()
    this.forceFetch()
  },
  methods: {
    openModal() {
      this.modalOpened = true
    },
    closeModal() {
      this.modalOpened = false
    },
    openDeviceModal() {
      this.deviceModalOpened = true
    },
    closeDeviceModal() {
      this.deviceModalOpened = false
    },
    openCustomizationModal () {
      this.customizationModalOpened = true
    },
    closeCustomizationModal () {
      this.customizationModalOpened = false
    },
    formattedPrice(price) {
      return Number(price).toLocaleString('en', { style: 'currency', currency: this.program.currency })
    },
    redirectToDashboard() {
      this.dashboardClickEvent()
      location.replace('/gosubs/dashboard')
    },
    confirmedOrderEvent() {
      this.pushToDataLayer({
        event: 'gosubsConfirmationPage'
      })
    },
    dashboardClickEvent() {
      this.pushToDataLayer({
        event: 'gosubsDashboardButtonClick'
      })
    },
    pushToDataLayer(data) {
      window.dataLayer = window.dataLayer || []
      window.dataLayer.push(data)
    },
    async updateDevice() {
      this.confirmChange = true
      try {
        const path = '/api/std/v1/subscriptions/' + btoa(this.subscription.email) + '/update_material'
        const url = process.env.VUE_APP_GOSUBS_HOST + path
        const opts = {
          method: 'post',
          body: JSON.stringify({ material: this.selectedMaterial }),
          headers: new Headers({
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Subs-Key': 'd10c1f2ffdacb879ea484933844d72b9bdd56a54c05748b8324b115c825e23bf'
          })
        }
        const response = await fetch(url, opts)
        const responseBody = await response.json()
        if (!response.ok) throw new Error(responseBody?.error || 'Something went wrong, please try again')
        this.$store.commit('setMaterial', responseBody.material)
        setTimeout(() => {
          this.confirmChange = false
          this.closeDeviceModal()
          this.$displayTopMessage('Your device was updated!')
        }, 1500)
      } catch (err) {
        this.resetMaterial()
        this.confirmChange = false
        this.closeDeviceModal()
        this.$displayTopMessage(err.message, 'error')
      }
    },
    resetMaterial() {
      this.selectedMaterial = this.material?.slug
    },
    submitAddress () {
      if (this.validateInputs()) {
        this.confirmChange = true
        this.updateAddress()
      }
    },
    submitCustomization () {
      if (this.validateInputs()) {
        this.confirmChange = true
        this.updateCustomization()
      }
    },
    validateInputs () {
      const isValidatable = (input) => typeof input.validate === 'function'
      const inputValidations = this.$refs.modal.$children
        .filter(isValidatable)
        .map((input) => input.validate())
      return !inputValidations.some((validation) => validation.hasErrors)
    },
    async updateAddress () {
      let msg, mode
      try {
        const path = '/api/std/v1/subscriptions/' + btoa(this.subscription.email) + '/update_address'
        const url = process.env.VUE_APP_GOSUBS_HOST + path
        const formData = new FormData(this.$refs.form)
        const opts = {
          method: 'post',
          body: formData,
          headers: new Headers({
            'Subs-Key': 'd10c1f2ffdacb879ea484933844d72b9bdd56a54c05748b8324b115c825e23bf'
          })
        }
        const response = await fetch(url, opts)
        const responseBody = await response.json()
        if (!response.ok) throw new Error(responseBody?.error || 'Something went wrong, please try again')
        this.$store.commit('setPayment', responseBody.payment_sub)
        msg = 'Your address was updated!'
        mode = 'success'
      } catch (err) {
        this.resetAddress()
        msg = err.message
        mode = 'error'
      } finally {
        setTimeout(() => {
          this.confirmChange = false
          this.$displayTopMessage(msg, mode)
          this.closeModal()
        }, 1500)
      }
    },
    async updateCustomization () {
      let msg, mode
      try {
        const path = '/api/std/v1/subscriptions/' + btoa(this.subscription.email) + '/update_profile'
        const url = process.env.VUE_APP_GOSUBS_HOST + path
        const formData = new FormData(this.$refs.profileForm)
        const { data } = await this.$axios.post(url, formData)
        this.$store.commit('setSubscription', data.profile)
        msg = 'Your profile was updated!'
        mode = 'success'
      } catch (err) {
        this.resetProfileInfo()
        msg = 'Something went wrong, please try again' || err.message
        mode = 'error'
      } finally {
        setTimeout(() => {
          this.confirmChange = false
          this.$displayTopMessage(msg, mode)
          this.closeCustomizationModal()
        }, 1500)
      }
    },
    resetAddress () {
      this.address = { ...this.payment }
    },
    resetProfileInfo () {
      this.profile = { ...this.subscription }
    },
    forceFetch() {
      this.$axios.get(`${process.env.VUE_APP_GOSUBS_HOST}/api/force-remote/${this.subscription.id}`)
    }
  }
}
</script>

<style lang="scss">
@media (min-width: 990px) {
  .gosubs-content--thin {
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (min-width: 1200px) {
  .gosubs-container {
      width: 1170px;
  }
}

.gosubs-container {
  margin-right: auto;
  margin-left: auto;
}

.gosubs-panel {
  position: relative;
  width: 100%;
  min-height: 750px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}

@media (min-width: 990px) {
  .gosubs-panel {
    min-height: 570px;
  }
}

.gosubs-panel__primary {
  transform: translateX(-50%);
}
.gosubs-panel__secondary {
  left: 100%;
  opacity: 0;
  transform: translateX(100%);
  text-align: center;
}

.gosubs-panel__primary,
.gosubs-panel__secondary {
  position: absolute;
  top: 0;
  left: 50%;
  transition: all .3s ease-in;
  flex-shrink: 0;
  width: 100%;
}
.gosubs-panel.active .gosubs-panel__primary{
  transform: translateX(-100%);
  opacity: 0;
}
.gosubs-panel.active .gosubs-panel__secondary{
  transform: translateX(-100%);
  left: 100%;
  opacity: 1;
}

.gosubs-form__row {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.gosubs-form__column {
  width: calc(50% - 4px);
  box-sizing: border-box;
}

.gosubs-form__group {
  width: 100%;
  position: relative;
}

.gosubs-form__group.filled .gosubs-form__label{
  font-size: 12px;
  top: 14px;
  transition: .2s ease all;
}

.gosubs-form__group.error .gosubs-form__input{
  background-color: #fef0f0;
  border: 1px solid #f08080;
}

.gosubs-form__group.error .gosubs-form__label{
  display: none;
}

.gosubs-form__group.filled .gosubs-form__input{
  padding-top: 20px;
}

.gosubs-form__group--selectbox .gosubs-form__input {
  padding-top: 20px;
  line-height: 19px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.gosubs-form__arrow {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 12px;
  display: block;
  transform: translateY(-50%);
}

.gosubs-form__arrow svg{
  max-width: 100%;
  height: auto;
}

.gosubs-form .gosubs-form__error {
  position: absolute;
  left: 10px;
  top: 9px;
  font-size: 12px;
  margin: 0;
  padding: 0;
  background: 0 0;
  height: 13px;
  line-height: 13px;
  text-transform: none;
  color: #f08080;
}

.gosubs-form .gosubs-form__label {
  position: absolute;
  left: 10px;
  top: 24px;
  font-size: 14px;
  transform: translateY(-50%);
  height: 11px;
  line-height: 12px;
  margin: 0;
  padding: 0;
  background: 0 0;
  cursor: pointer;
  text-transform: none;
  transition: .2s ease all;
}

.gosubs-form .gosubs-form__input {
  font-size: 14px;
  background-color: #f2f2f6;
  height: 48px;
  line-height: normal;
  padding: 10px 8px 8px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid transparent;
  outline: none;
  transition: .2s ease all;
  box-sizing: border-box;
}
.gosubs-form .gosubs-form__input:focus {
  outline: none;
  border-color: #333;
  padding-top: 24px;
  background: #fff
}

.gosubs-form .gosubs-form__input::placeholder{
  font-size: 12px;
}

.gosubs-form {
  display: grid;
}
.gosubs-title {
  text-align: center;
  margin: 20px 0;
}

.gosubs-btn {
  padding: 16px;
  background: #444;
  border: 0;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;
}
.gosubs-btn span {
  color: white;
}
.gosubs-btn:hover {
  background: #000;
  text-decoration: none;
  outline: none;
}
.gosubs-btn:focus {
  outline: none;
}

.gosubs-panel__msg {
  transition: all .3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0; 
}

.gosubs-panel__msg {
  opacity: 0;  
  visibility: hidden;
}

.gosubs-panel__msg {
  transform: translateX(100%);
}

.success .gosubs-panel__msg {
  opacity: 1;  
  visibility: visible;
  transform: translateX(0);
}


.success__icon {
  position: relative;
  padding: 30px;
  display: table;
  margin: 0 auto 30px;
}

.checkmark__confetti {
  position: absolute;
  animation: grow 1.4s cubic-bezier(0.3, 0, 0.9, 1.4) infinite both;
}
.checkmark__confetti:nth-child(1) {
  width: 12px;
  height: 12px;
  left: 6px;
  top: 64px;
}
.checkmark__confetti:nth-child(2) {
  width: 18px;
  height: 18px;
  left: 158px;
  top: 62px;
}
.checkmark__confetti:nth-child(3) {
  width: 10px;
  height: 10px;
  left: 38px;
  top: 123px;
}
.checkmark__confetti:nth-child(4) {
  width: 20px;
  height: 20px;
  left: 127px;
  top: 1px;
}
.checkmark__confetti:nth-child(5) {
  width: 14px;
  height: 14px;
  left: 125px;
  top: 121px;
}
.checkmark__confetti:nth-child(6) {
  width: 10px;
  height: 10px;
  left: 39px;
  top: 1px;
}
.checkmark__confetti:nth-child(1) {
  animation-delay: 0.175s;
}
.checkmark__confetti:nth-child(2) {
  animation-delay: 0.35s;
}
.checkmark__confetti:nth-child(3) {
  animation-delay: 0.525s;
}
.checkmark__confetti:nth-child(4) {
  animation-delay: 0.7s;
}
.checkmark__confetti:nth-child(5) {
  animation-delay: 0.875s;
}
.checkmark__confetti:nth-child(6) {
  animation-delay: 1.05s;
}

.checkmark__check {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate3d(-50%, -50%, 0);
  fill: white;
}

.checkmark__back {
  fill: #ec8ab3;
  animation: rotate 35s linear both infinite;
}

.checkmark__confetti {
  fill: #ec8ab3;
}

.section-header {
  padding: 10*$gutter 0;
}
.section-header__icon {
  width: 62.2px;
  margin-bottom: 3*$gutter;
  svg {
    max-width: 100%;
    display: block;
  }
}
.section-header__content {
  font-size: 24px;
  line-height: 22px;
  margin: 0;
}
  .section-header__title {
    color: $color_title;
    display: block;
  }
  .section-header__subtitle {
    color: $color_primary;
  }

.section {
  margin-bottom: 10*$gutter;
  line-height: 16px;
}
  .section__title {
    color: $color_title;
    font-size: 16px;
    margin: 0 0 3*$gutter;
    font-weight: 900;
    font-size: 16px;
    line-height: 18px;
  }
  .section__btn {
    background-color: $color_primary;
    height: 56px;
    display: block;
    border-radius: 12px;
    border: 0;
    color: #fff;
    padding: 0 $gutter_mobile;
    margin-bottom: $gutter_mobile;
    outline: none;
    text-decoration: none;
    text-align: center;
    line-height: 56px;

    &:hover {
      background-color: $color_title;
      cursor: pointer;
    }
  }

.timeline {
  border-left: 2px solid $color_gray_medium;
  padding: 0;
  margin: 0;
}
  .timeline__item {
    padding-left: 22px;
    margin-bottom: 22px;
    list-style: none;
    position: relative;
    display: flex;

    &:last-child {
      margin-bottom: 0;
    }

    &::before {
      background-color: $color_primary;
      border: 2px solid #FFF;
      border-radius: 14px;
      box-sizing: border-box;
      box-shadow: 0px 0px 0px 2px #FFF;
      content: '';
      width: 14px;
      height: 14px;
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .timeline__icon {
    background-color: $color_primary_light;
    border-radius: 10px;
    width: 48px;
    height: 48px;
    display: block;
    margin-right: 4*$gutter;
    flex-shrink: 0;
    position: relative;
  }
  .timeline__svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    svg {
      display: block;
    }
  }
  .timeline__checkpoint {
    font-size: 16px;
    font-weight: normal;
    color: $color_title;
    margin: 0 0 2*$gutter;
    display: block;
  }
  .timeline__text {
    margin: 0;
    font-size: 13px;
    line-height: 15px;
    color: $color_text;
  }

.review {
  margin-left: -15px;
  margin-right: -15px;
}
  .review__title {
    color: $color_title;
    font-size: 16px;
    margin: 0 0 3*$gutter;
  }
  .review__item {
    padding: $gutter_mobile 15px;
    border-bottom: 1px solid $color_gray_medium;
  }
  .review__details {
    margin: 0 0 $gutter;
    font-size: 13px;
    color: $color_text;
    line-height: 14px;
    &--update {
      color: $color_title; 
      margin-top: 3*$gutter;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
  .review__details-link {
    color: $color_primary;
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }

@media (min-width: $screen_tablet) {
  .review {
    margin-left: 0;
    margin-right: 0;
  }
}

.float-form {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;

  .float-label {
    &__input,
    &__select {
      font-family: averta,sans-serif;
      background-color: $color_gray;
      height: 56px;
      max-height: initial;
      width: 100%;
      border-radius: 12px;
      border: 1px solid $color_gray;
      color: $color_title;
      padding: 3*$gutter $gutter_mobile 0;
      margin-top: 0;
      outline: none;

      &:focus {
        border-color: $color_pink;
      }
    }
  }
}

  .float-label {
    margin: 0 0 $gutter_mobile;
    padding: 0;
    position: relative;
    width: 100%;

    &.filled {
      .float-label__text {
        top: 26px;
        font-size: 12px;
        transform: translateY(-18px);
      }
    }

    &.error {
      .float-label__input,
      .float-label__select {
        border-color: #EC3F69;
      }
    }

    &--selectbox {
      &::after {
        position: absolute;
        top: 50%;
        right: 25px;
        width: 0;
        height: 0;
        padding: 0;
        content: '';
        margin-top: -3px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid #aaa;
        pointer-events: none;
      }
    }

    &__input,
    &__select {
      font-family: averta,sans-serif;
      background-color: $color_gray;
      height: 56px;
      max-height: initial;
      width: 100%;
      border-radius: 12px;
      border: 1px solid $color_gray;
      color: $color_title;
      padding: 3*$gutter $gutter_mobile 0;
      margin-top: 0;
      outline: none;

      &:focus {
        border-color: $color_pink;
      }
    }
  }

  .float-label__text {
    font-family: averta,sans-serif;
    font-size: 14px;
    margin: 0;
    text-transform: none;
    position: absolute;
    top: 20px;
    left: 25px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
                font 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  }

.float-label__warning {
  color: #EC3F69;
  font-size: 12px;
  margin-top: $gutter;
  display: block;
  text-align: left;
}

@media (min-width: $screen_tablet) {
  .float-form {
    margin-left: -2*$gutter;
    margin-right: -2*$gutter;

    .float-label {
      width: 50%;
      padding: 0 2*$gutter;
      box-sizing: border-box;
    }
  }
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}
</style>
