main
  h1 <span class="fontawesome-plane"></span> Moon Flights
  h2 Select your flight dates below
  #flight-datepicker(class="input-daterange input-group")
    .form-item
      label Depart on
      span.fontawesome-calendar
      input(type="text" class="input-sm form-control" id="start-date" name="start" placeholder="Select depart date" data-date-format="DD, MM d")
      span.date-text.date-depart
    .form-item
      label Return on
      span.fontawesome-calendar
      input(type="text" class="input-sm form-control" id="end-date" name="end" placeholder="Select return date" data-date-format="DD, MM d")
      span.date-text.date-return

@import url(https://fonts.googleapis.com/css?family=Lato:900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

$lato:             'Lato', sans-serif;

$bp-small:         400px;

$bg-body:          #24A0AD;
$bg-date-active:   darken($bg-body, 10%);
$bg-date-border:   #ededed;
$bg-date-hover:    #eeeeee;
$bg-date-selected: $bg-body;
$bg-date-text:     white;
$bg-input:         #ffffff;

$color-date-lite:  #ccc;
$color-input:      darken($bg-body, 25%);
$color-text:       #ffffff;

$margin-element:   12px;
$margin-form:      36px;

@mixin pos($position: absolute) {
  position: $position;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

@mixin placeholder {
  &::-webkit-input-placeholder {@content}
  &:-moz-placeholder           {@content}
  &::-moz-placeholder          {@content}
  &:-ms-input-placeholder      {@content}  
}

* {
  box-sizing: border-box;
}

body {
  font-family: $lato;
  line-height: 1.2;
  background-color: $bg-body;
}

h1 {
  font-size: 40px;
  font-weight: 900;
  color: $color-text;
  margin-bottom: $margin-element;
}

h2 {
  font-size: 22px;
  color: $color-text;
  margin-bottom: $margin-element;
}

main {
  @include pos;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  width: 100%;
  height: 100%;
  max-width: 600px;
}

#flight-datepicker {
  @media screen and (min-width: $bp-small) {
    display: flex;
  }
  margin-top: $margin-form;
  .form-item {
    position: relative;
    margin: 12px 0 60px;
    @media screen and (min-width: $bp-small) {
      margin: 12px 24px 0 0;
    }
  }
  label {
    display: block;
    margin-bottom: 8px;
    color: $bg-date-text;
  }
  input {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 6px;
    width: 100%;
    font-family: $lato;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    color: $color-input;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid $bg-input;
    border-radius: 0;
    outline: none;
    transition: border-color .2s ease-out;
    &:first-child,
    &:last-child {
      border-radius: 0;
    }
    @include placeholder {
      color: $color-input;
      font-size: 14px;
      line-height: 30px;
      transition: color .2s .2s ease-out;
    }
    &:focus {
      border-bottom-color: darken($bg-body, 20%);
      @include placeholder {
        color: transparent;
        transition: color .2s ease-out;
      }
    }
  }
  .date-text {
    @include pos;
    top: calc(100% + 6px);
    font-size: 12px;
    color: $bg-date-text;
    @media screen and (min-width: $bp-small) {
      top: 100%;
    }
  }
}

.datepicker.dropdown-menu {
  padding: 0;
  background-clip: border-box;
  border: none;
  border-radius: 0;
  animation: popup .2s ease-out forwards;
  table {
    background-color: darken($bg-body, 10%);
    thead {
      background-color: darken($bg-body, 10%);
      tr {
        border-top: 0;
      }
    }
    tbody {
      background-color: white;
    }
    tr {
      border-top: 1px solid $bg-date-border;
      td, th {
        width: auto;
        height: 24px;
        padding: 8px;
        font-size: 16px;
        border-radius: 0;
        transition: background-color .6s ease-out;
        @media screen and (min-width: $bp-small) {
          padding: 12px;
        }
        &:hover,
        &.active:hover,
        &:active:hover {
          border-color: $bg-date-border;
          border-radius: 0;
          transition: background-color .2s ease-out;
        }
        &.focused,
        &.selected {
          background-color: $bg-date-selected;
          border-color: $bg-date-border;
          border-radius: 0;
        }
        &.active,
        &.active:focus,
        &.active.active:hover,
        &:active:focus,
        &.highlighted {
          background-color: $bg-date-active;
          border-color: $bg-date-border;
        }
      }
      th.datepicker-switch {
        font-size: 12px;
        font-weight: bold;
        line-height: 2;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: $color-text;
        background-color: inherit;
        border-radius: 0;
      }
      th.prev,
      th.next {
        color: $color-text;
        background-color: darken($bg-body, 15%);
        border-radius: 0;
      }
      th.dow {
        padding: 2px 12px;
        font-size: 12px;
        line-height: 2;
        color: $color-text;
        background-color: darken($bg-body, 12%);
        border-top: 1px solid darken($bg-body, 13%);
        border-radius: 0;
      }
      td.day {
        width: 24px;
        border-right: 1px solid #ededed;
        &:last-child {
          border-right-width: 0;
        }
      }
      td.range {
        background-color: $bg-date-hover;
      }
    }
  }
  .new,
  .old,
  .disabled,
  .disabled:hover {
    color: $color-date-lite;
  }
}

[class*="fontawesome-"] {
  &:before {
    font-family: 'FontAwesome', sans-serif;
  }
}

.fontawesome-calendar {
  position: absolute;
  top: 26px;
  right: 0;
  font-size: 24px;
  z-index: -99;
}

@keyframes popup {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Make your own here: https://eternicode.github.io/bootstrap-datepicker

var dateSelect     = $('#flight-datepicker');
var dateDepart     = $('#start-date');
var dateReturn     = $('#end-date');
var spanDepart     = $('.date-depart');
var spanReturn     = $('.date-return');
var spanDateFormat = 'ddd, MMMM D yyyy';

dateSelect.datepicker({
  autoclose: true,
  format: "mm/dd",
  maxViewMode: 0,
  startDate: "now"
}).on('change', function() {
  var start = $.format.date(dateDepart.datepicker('getDate'), spanDateFormat);
  var end = $.format.date(dateReturn.datepicker('getDate'), spanDateFormat);
  spanDepart.text(start);
  spanReturn.text(end);
});