/**
 * 3rd Party Dependencies
 *  - breakpoint-sass
 */

@import './node_modules/pikaday/scss/pikaday';

$pika-today: #fbf9ee;
$pika-hover: #212121;

.c-datepicker {
  position: relative;
}

.c-datepicker--style-guide {
  padding-top: 270px;
}

.c-datepicker__icon {
  top: 16px;

  svg {
    @include size(22px);
    @include position(relative, top 4px);
    
    &.icon--small {
      fill: $silver-grey;
    }

    &.icon--error {
      display: none;
    }
  }
}

.c-datepicker__input {
  @include border(1px solid, $es-bright-blue, all);
  @include border-radius(4px, all);
  @include size(null, 100%);
  background-color: $es-white;
  padding: 16px 10px 16px 50px;
  text-align: left;

  &.invalid {
    // @TODO Error styles should be set for all inputs not per component?
    border-color: $burnt-sienna-red;
  }
}

// Plugin options
.pika-single {
  @include border(1px solid, $es-bright-blue, all);
  @include border-radius(4px, all);
  @include size(null, 300px);
  transition: opacity 0.2s ease-out, visibility 0s ease-out 0.2s;
  transition-delay: 0s;
  z-index: z('stacked-front');

  @include breakpoint(max-width 380px) {
    // Importants must be used to override inline styles created in JS
    // for small devices
    // sass-lint:disable-block no-important
    left: 0 !important;
    right: 0 !important;
    margin: auto;
  }

  @include breakpoint($from-small) {
    @include font($pembroke-light);
    @include size(null, auto);
  }

  &.is-bound {
    box-shadow: none;
    visibility: visible;
    opacity: 1;
  }

  &.is-hidden {
    display: block;
    visibility: hidden;
    opacity: 0;
  }
}

.pika-lendar {
  @include size(null, auto);
}

.pika-title,
.pika-label {
  font-size: rem(18px);
  color: $es-bright-blue;
  font-weight: bold;
}

.pika-title {
  @include border(1px solid, $lilac-grey, bottom);
  margin-bottom: 15px;
  padding-bottom: 5px;
}

.pika-table {
  margin: 5px;

  th {
    font-size: rem(14px);
    color: $charcoal-grey;
    font-weight: 500;
  }

  // sass-lint:disable-block force-attribute-nesting
  // sass-lint:disable-block no-qualifying-elements
  abbr[title] {
    text-decoration: none;
    cursor: default;
  }

  @include breakpoint($from-small) {
    th {
      @include font($pembroke-medium, normal, 400);
    }
  }
}

.pika-button {
  @include border-radius(100%, all);
  transition: background 0.1s ease-out;
  text-align: center;
  padding: 12px;
  background: none;
  color: $charcoal-grey;

  .is-selected & {
    @include border-radius(100%, all);
    background: $es-yellow;
    box-shadow: none;
    color: $charcoal-grey;
    font-weight: 400;
  }

  .is-disabled & {
    opacity: 0.7;
  }

  .is-today & {
    color: $charcoal-grey;
    background: $pika-today;
    font-weight: 400;
  }

  &:hover {
    @include border-radius(100%, all);
    background: $es-yellow;
    color: $pika-hover;
  }
}

.pika-next {
  svg {
    @include position(absolute, top 10px right 0);

    @include target-firefox {
      transform: rotateZ(270deg);
    }

    transform: rotate(180deg);
    transform-origin: center center;
  }
}

.pika-prev {
  svg {
    @include position(absolute, top 10px left 0);
  }
}

.pika-next,
.pika-prev {
  opacity: 1;
  background-image: none;

  svg {
    @include size(18px);
    z-index: z('below');
  }
}

.pika-select {
  display: none;
}