$lafourchette-booking-content-gutter-mobile: 1rem;

/*
 * Base
 */
.c-lafourchettebooking
{
  background: $color-grey-darker;
  border-bottom: 6px solid $color-golden;
  display: block;
  overflow: hidden;

  .form-select
  {
    background-color: $color-grey;
    border-color: $color-grey-border-light;
    padding: 0.8rem 0.5rem;
  }
}
.c-lafourchettebooking-title
{
  display: none;
}
.c-lafourchettebooking-nav
{
  display: none;
}
.c-lafourchettebooking-mobilenav
{
  background: $color-grey-dark;
  display: flex;
    align-items: center;
  min-height: 6rem;
}
.c-lafourchettebooking-mobilenav-back
{
  @include reset-button;

  background: #444;
  flex-shrink: 0;
  padding: 2rem 0.5rem;
}
.c-lafourchettebooking-mobilenav-back-icon
{
  display: block;
  height: 2rem;
  width: 2rem;

  svg
  {
    display: block;
    height: 100%;
    width: 100%;
  }
}
.c-lafourchettebooking-mobilenav-text
{
  display: block;
  flex-grow: 1;
  padding: 2rem 0.5rem;

  color: $color-golden;
  font-size: 0.85rem;
  text-align: center;
}
.c-lafourchettebooking-loader
{
  display: flex;
    justify-content: center;
  padding: 3rem $lafourchette-booking-content-gutter-mobile;

  .ui-loader
  {
    height: 10rem;
    width: 10rem;
  }
}
.c-lafourchettebooking-step
{
  margin: $lafourchette-booking-content-gutter-mobile * 2 $lafourchette-booking-content-gutter-mobile $lafourchette-booking-content-gutter-mobile;
}
.c-lafourchettebooking-step-title
{
  margin: $lafourchette-booking-content-gutter-mobile * 3 0;

  color: $color-grey-font;
  text-align: center;
}
.c-lafourchettebooking-step-notice
{
  margin-top: $lafourchette-booking-content-gutter-mobile;

  color: $color-golden;
  font-family: lucien-regular, Arial, Helvetica, sans-serif;
  text-align: center;
}
.c-lafourchettebooking-step-message
{
  color: #FFF;
  text-align: center;
}
.c-lafourchettebooking-step-errormessage
{
  margin-top: 1rem;

  color: $color-error;
  text-align: center;
}
.c-lafourchettebooking-step-footer
{
  margin-top: $lafourchette-booking-content-gutter-mobile * 3;
}
.c-lafourchettebooking-radiolist
{
  display: block;
  margin: $lafourchette-booking-content-gutter-mobile 0;
}
.c-lafourchettebooking-radiolist-item
{
  display: block;
  list-style: inside none;
  margin-bottom: 1.54rem;

  &:last-child
  {
    margin-bottom: 0;
  }
}
.c-lafourchettebooking-radiolist-item-container
{
  cursor: pointer;
  display: flex;
    align-items: center;
}
.c-lafourchettebooking-radiolist-item-input
{
  display: none;
}
.c-lafourchettebooking-radiolist-item-radio
{
  background: #2E2A2B;
  border-radius: 50%;
  border: 1px solid #464344;
  display: block;
  flex-shrink: 0;
  height: 1.2rem;
  width: 1.2rem;

  transition: background-color 0.3s ease;
}
.c-lafourchettebooking-radiolist-item-label
{
  margin-left: 0.78rem;

  color: #FFF;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
}
.c-lafourchettebooking-datepicker
{
  .pika-table
  {
    .pika-day
    {
      &::after
      {
        content: "*";
        display: block;
        line-height: 1;
        visibility: hidden;
      }
      &.is-menu-offer::after
      {
        color: $color-golden;
        visibility: visible;
      }
    }
    td.is-selected
    {
      .pika-day
      {
        &.is-menu-offer::after
        {
          color: #FFF;
        }
      }
    }
  }
}
.c-lafourchettebooking-datepicker-input
{
  display: none;
}
.c-lafourchettebooking-buttonsgroup
{
  margin-bottom: $lafourchette-booking-content-gutter-mobile * 2;

  &:last-child
  {
    margin-bottom: 0;
  }
}
.c-lafourchettebooking-buttonsgroup-title
{
  margin-bottom: $lafourchette-booking-content-gutter-mobile;

  color: #FFF;
  line-height: 1;
}
.c-lafourchettebooking-buttonsgroup-controls
{
  display: flex;
    flex-wrap: wrap;
}
.c-lafourchettebooking-buttonsgroup-control
{
  @include fixed-columns(4, 0.3rem);
}
.c-lafourchettebooking-buttonsgroup-control-button
{
  @include reset-button;

  background: $color-grey;
  display: block;
  padding: 1rem 0;
  width: 100%;

  color: $color-grey-lighter;
  text-align: center;

  transition: background-color 0.3s ease,
              color 0.3s ease;
}
.c-lafourchettebooking-buttonsgroup-control-notice
{
  display: block;
  margin-top: 0.4rem;
  width: 100%;

  color: $color-grey-semi-light;
  font-size: 0.8rem;
  text-align: center;
}
.c-lafourchettebooking-form
{
  .parsley-errors-list
  {
    list-style: inside none;
    margin-top: 0.4rem;
    padding: 0;

    color: $color-error;
    font-size: 0.6rem;
  }
}
.c-lafourchettebooking-form-row
{
  display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  margin-bottom: $lafourchette-booking-content-gutter-mobile * 2;

  &:last-child
  {
    margin-bottom: 0;
  }
}
.c-lafourchettebooking-form-radio
{
  display: flex;
    align-items: center;
  margin: 0 0 0 3rem;

  &:first-child
  {
    margin-left: 0;
  }
}
.c-lafourchettebooking-form-radio-input
{
  appearance: none;
  background: transparent;
  border: 1px solid $color-grey-border-light;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  height: 1.4rem;
  margin: 0 !important;
  outline: none !important;
  width: 1.4rem;

  transition: background-color 0.3s ease;
}
.c-lafourchettebooking-form-radio-label
{
  margin-left: 1rem;

  color: #FFF;
}
.c-lafourchettebooking-form-textfield
{
  margin-bottom: $lafourchette-booking-content-gutter-mobile * 2;
  width: 100%;

  &:last-child
  {
    margin-bottom: 0;
  }
}
.c-lafourchettebooking-form-textfield-input
{
  appareance: none;
  background-color: $color-grey;
  border: 1px solid $color-grey-border-light;
  border-radius: 0;
  display: block;
  outline: none;
  padding: 1rem 0.5rem;
  width: 100%;

  color: #FFF;
  font-size: 0.75rem;

  transition: border-color 0.3s ease;

  &::placeholder
  {
    color: $color-grey-light;
  }
}
.c-lafourchettebooking-form-phone
{
  display: flex;
  width: 100%;
}
.c-lafourchettebooking-form-phone-prefix
{
  flex-grow: 0;
  width: 60%;

  font-size: 0.75rem;
}
.c-lafourchettebooking-form-phone-field
{
  margin-left: $lafourchette-booking-content-gutter-mobile;
}
.c-lafourchettebooking-form-optin
{
  display: flex;
    align-items: flex-start;
  width: 100%;
}
.c-lafourchettebooking-form-optin-checkbox
{
  appearance: none;
  background: transparent;
  border: 1px solid $color-grey-border-light;
  display: block;
  height: 1.4rem;
  flex-shrink: 0;
  margin: 0 !important;
  outline: none !important;
  width: 1.4rem;

  transition: background-color 0.3s ease;
}
.c-lafourchettebooking-form-optin-text
{
  display: block;
  margin-left: $lafourchette-booking-content-gutter-mobile;

  color: $color-grey-lighter;
  font-family: lucien-light, sans-serif;
  font-size: 0.8rem;
}

/*
 * Modifiers
 */
.c-lafourchettebooking-step--hour
{
  .c-lafourchettebooking-step-notice
  {
    color: $color-grey-semi-light;
  }
}
.c-lafourchettebooking-form-row--title
{
  flex-wrap: nowrap;
}

/*
 * States
 */
.c-lafourchettebooking-steps[v-cloak]
{
  display: none;
}
.c-lafourchettebooking-radiolist-item-input:checked
{
  & ~ .c-lafourchettebooking-radiolist-item-radio
  {
    background: $color-golden;
  }
}
.c-lafourchettebooking-step-footer-button:disabled
{
  filter: grayscale(100%);
  opacity: 0.3;
  pointer-events: none;
}
.c-lafourchettebooking-buttonsgroup-control-button.is-active
{
  background-color: $color-golden;
  color: #FFF;
}
.c-lafourchettebooking-form-radio.is-invalid
{
  .c-lafourchettebooking-form-radio-input
  {
    border-color: $color-error;
  }
  .c-lafourchettebooking-form-radio-label
  {
    color: $color-error;
  }
}
.c-lafourchettebooking-form-radio-input:checked
{
  background-color: $color-golden;
}
.c-lafourchettebooking-form-textfield-input:focus
{
  border-color: $color-golden;
}
.c-lafourchettebooking-form-optin-checkbox:checked
{
  background-color: $color-golden;
}
.c-lafourchettebooking-confirm-picture
{
  display: block;
  margin-bottom: $lafourchette-booking-content-gutter-mobile;
  width: 100%;

  img
  {
    display: block;
    width: 100%;
  }
}
.c-lafourchettebooking-confirm-title
{
  margin-bottom: 0.5rem;

  color: #FFF;
  font-family: lucien-bold, sans-serif;
}
.c-lafourchettebooking-confirm-description
{
  margin-bottom: 1.6rem;

  color: #FFF;
}
.c-lafourchettebooking-confirm-details
{
  margin-bottom: 1.6rem;

  &:last-child
  {
    margin-bottom: 0;
  }
}
.c-lafourchettebooking-confirm-details-title
{
  color: #FFF;
  font-family: lucien-bold, sans-serif;
}
.c-lafourchettebooking-confirm-details-description
{
  color: $color-grey-light;
}

@include tablet-portrait-and-up
{
  /*
   * Base
   */
  .c-lafourchettebooking-title
  {
    background: $color-grey-dark;
    display: block;
    padding: 2rem;

    color: #FFF;
    font-size: 1.6rem;
    text-align: center;
  }
  .c-lafourchettebooking-mobilenav
  {
    display: none;
  }
  .c-lafourchettebooking-nav
  {
    display: block;
  }
  .c-lafourchettebooking-nav-items
  {
    background: $color-grey-dark;
    display: flex;
    list-style: inside none;
  }
  .c-lafourchettebooking-nav-item
  {
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    margin-left: -1px;

    &:first-child
    {
      margin-left: 0;

      .c-lafourchettebooking-nav-item-button
      {
        border-left: none
      }
    }
    &:last-child
    {
      .c-lafourchettebooking-nav-item-button
      {
        border-right: none;
      }
    }
  }
  .c-lafourchettebooking-nav-item-button
  {
    @include reset-button;

    border: 1px solid #808080;
    border-bottom-color: $color-golden;
    padding: 1.2rem 0.2rem;
    width: 100%;
  }
  .c-lafourchettebooking-nav-item-icon
  {
    display: inline-block;
    height: 1rem;
    vertical-align: middle;
    width: 1rem;

    color: #808080;
    transition: color 0.3s ease;

    svg
    {
      display: block;
      height: 100%;
      width: 100%;
    }
  }
  .c-lafourchettebooking-nav-item-label
  {
    margin-left: 0.2rem;
    vertical-align: middle;

    color: #FFF;
    font-size: 0.6rem;
    line-height: 1;
    text-transform: uppercase;
  }
  .c-lafourchettebooking-steps
  {
    display: flex;
      justify-content: center;
  }
  .c-lafourchettebooking-step
  {
    margin-bottom: 3rem;
    margin-top: 3rem;
    min-width: 80%;
    max-width: 81%;
  }
  .c-lafourchettebooking-step-notice
  {
    font-size: 0.8rem;
  }
  .c-lafourchettebooking-step-footer
  {
    display: none;
  }
  .c-lafourchettebooking-datepicker
  {
    .pika-day
    {
      &::after
      {
        font-size: 0.6rem;
        margin-top: 0.2rem;
      }
      &.is-menu-offer::after
      {
        color: #FFF !important;
        content: attr(data-menu-offer-label);
      }
    }
  }
  .c-lafourchettebooking-buttonsgroup-control-button
  {
    padding: 0.6rem 0;
  }
  .c-lafourchettebooking-form-optin
  {
    align-items: center;
  }
  .c-lafourchettebooking-form-phone-prefix
  {
    width: auto;
  }
  .c-lafourchettebooking-confirm
  {
    display: flex;
  }
  .c-lafourchettebooking-confirm-picture
  {
    width: auto;

    img
    {
      width: auto;
    }
  }
  .c-lafourchettebooking-confirm-content
  {
    margin-left: 2rem;
  }

  /*
   * Modifiers
   */
  .c-lafourchettebooking-step--saletype
  {
    min-width: 0;
  }
  .c-lafourchettebooking-step--date
  {
    .c-lafourchettebooking-step-notice
    {
      display: none;
    }
  }
  .c-lafourchettebooking-step--contact
  {
    .c-lafourchettebooking-step-footer
    {
      display: flex;
        justify-content: flex-end;
    }
    .c-lafourchettebooking-step-footer-button
    {
      width: auto;
    }
  }

  /*
   * States
   */
  .c-lafourchettebooking-nav-item.is-active
  {
    position: relative;
      z-index: 2;

    .c-lafourchettebooking-nav-item-button
    {
      background-color: $color-grey-darker;
      border-color: $color-golden;
      border-bottom-color: transparent;
    }
    .c-lafourchettebooking-nav-item-icon
    {
      color: $color-golden;
    }
  }
}

@include desktop
{
  /*
   * Base
   */
  .c-lafourchettebooking-radiolist-item-radio
  {
    height: 1rem;
    width: 1rem;
  }
  .c-lafourchettebooking-radiolist-item-label
  {
    font-size: 1rem;
    margin-left: 1.2rem;
  }

  /*
   * States
   */
  .c-lafourchettebooking-nav-item-button:disabled
  {
    cursor: not-allowed;
  }
}
