@import '../../00-materials/styles/mixins/check-mark-animated';

axa-datepicker {
  display: inline-block;
  vertical-align: top;

  * {
    box-sizing: content-box;
  }

  &[inputfield] {
    .m-datepicker__wrap {
      position: absolute;
      margin-top: 1px;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.25s;
    }

    &[inverted] .m-datepicker__wrap {
      bottom: 40px;
    }

    &[open] .m-datepicker__wrap.m-datepicker__wrap-effect {
      opacity: 1;
      margin-bottom: 1px;
    }
  }

  &[error]:not([error=""]),
  &[invalid] {
    .m-datepicker__input,
    .m-datepicker__input-button {
      border-color: $color-shy-tomato;
      outline-color: $color-shy-tomato;
    }
    .m-datepicker__input-wrap:hover .m-datepicker__input-button {
      border-color: $color-shy-tomato;
      outline-color: $color-shy-tomato;
    }
  }

  &[label] {
    vertical-align: bottom;

    .m-datepicker__label {
      @include text(t3);
      display: block;
      font-weight: 600;
      color: $color-dark-grey;
      margin-bottom: 10px;
    }
  }

  &[disabled] {
    .m-datepicker__label {
      color: $color-light-grey;
    }

    .m-datepicker__input,
    .m-datepicker__input-button,
    .m-datepicker__input-button svg {
      pointer-events: none;
      outline: none;
      border-color: $color-mercury !important;
      background-color: $color-alabaster;
      color: $color-light-grey;
      fill: $color-light-grey;
    }
  }

  &[invaliddatetext=""] {
    .m-datepicker__error {
      display: none;
    }
  }
}

axa-datepicker .m-datepicker {
  position: relative;
  display: block;

  &,
  &__calendar-cell {
    @include text(t4);
  }

  &__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  &__input-button {
    flex-shrink: 0; // because of IE
    background: $color-prim-white;
    cursor: pointer;
    border: 1px solid;
    border-color: $color-light-grey;
    border-left: none;
    line-height: 0;
    margin-left: 0; /* suppress Safari 2px margin */
    box-sizing: border-box;
    height: 100%;
    min-height: 40px;

    &:focus {
      outline: 2px solid $color-axa-blue;
      outline-offset: -2px;
    }

    svg {
      color: $color-axa-blue;
      width: 24px;
      height: 24px;
      fill: $color-axa-blue;
    }
  }

  &__input {
    @include text(t4);
    appearance: none;
    line-height: normal;
    border: 1px solid;
    border-color: $color-light-grey;
    border-right: none;
    border-radius: 0; // mobile Safari...
    padding: 0 10px 0 20px;
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 40px;
    box-sizing: border-box;

    &::placeholder,
    &:-ms-input-placeholder {
      @include text(t4);
    }

    &::-ms-clear {
      display: none;
    }

    &:hover {
      border-color: $color-axa-blue;

      + .m-datepicker__input-button {
        border-color: $color-axa-blue;
      }
    }

    &:focus {
      outline: 2px solid $color-axa-blue;
      outline-offset: -2px;
    }
  }

  &__wrap {
    position: relative;
    background: $color-prim-white;
    background: $color-prim-white;
    border: solid 1px $color-silver;
    box-shadow: 0 5px 7px 0 $color-silver;
  }

  &__dropdown-wrap {
    display: flex;
    width: 236px;
    padding: 20px 30px 18px;
    justify-content: space-between;
  }

  &__dropdown-year {
    width: 94px; // 90px are not enough for iPhones on axa.ch-AEM
    text-transform: uppercase;
  }

  &__dropdown-month {
    width: 136px;
  }

  &__weekdays {
    background-color: $color-axa-blue;
    color: $color-prim-white;
    padding: 0 22px;
  }

  &__weekdays-inner {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 8px 0;
  }

  &__weekdays-day {
    display: block;
    @include text(t4);
    margin: auto;
    text-align: center;
    text-transform: uppercase;
  }

  &__calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 10px 22px 16px;
  }

  &__calendar-cell {
    display: block;
    width: 30px;
    height: 30px;
    margin: 1px auto;
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
    border-radius: 50%;
    border: solid 2px transparent;
    cursor: pointer;
    box-sizing: border-box;
  }

  &__calendar-cell:focus {
    outline: 0;
    border: dashed 2px $color-axa-blue;
  }

  &__calendar-day--inactive {
    visibility: hidden;
  }

  &__calendar-not-current-month {
    border: 0;
    color: $color-silver;

    &:hover {
      background: rgba($color-mercury, 0.5);
    }
  }

  &__calendar-current-month {
    border: 0;
    color: $color-dark-grey;
  }

  &__calendar-current-month:hover {
    box-shadow: 0 0 0 1px $color-axa-blue inset;
    background-color: $color-prim-white;
    color: $color-dark-grey;
  }

  &__calendar-current-month:focus:hover {
    border: 0;
  }

  &__calendar-cell:focus {
    outline: 0;
    border: dashed 1px $color-axa-blue;
  }

  &__calendar-cell:active {
    outline: 0;
    border: solid 1px $color-axa-blue;
  }

  &__calendar-cell:hover:active {
    box-shadow: none;
    outline: 0;
    background-color: $color-axa-blue;
    color: $color-prim-white;
  }

  &__calendar-cell:active:focus {
    box-shadow: none;
    outline: 0;
    border: 0;
  }

  &__calendar-current-month:hover &__calendar-selected-day,
  &__calendar-current-month:hover &__calendar-today {
    background-color: $color-axa-blue;
    color: $color-prim-white;
    opacity: 1;
  }

  &__calendar-selected-day {
    background-color: $color-axa-blue;
    color: $color-prim-white;
  }

  &__calendar-today {
    background-color: $color-mercury;
  }

  &__button {
    display: none;
    position: absolute;
    top: 172px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid $color-silver;
    box-shadow: 0px 5px 7px $color-silver;
    box-sizing: border-box;
    background: $color-prim-white;
    outline: none;
    color: $color-axa-blue;
    cursor: pointer;

    svg {
      vertical-align: middle;
    }

    &[disabled] {
      color: $color-mercury;
    }
  }

  &__button-prev {
    left: -20px;
  }

  &__button-next {
    right: -20px;
  }

  &__error {
    display: inline-block;
    color: $color-shy-tomato;
    @include text(t4);
    line-height: 1.2;
    margin-top: 10px;
    min-height: 16px;
  }

  .m-datepicker__input-icon {
    color: $color-axa-blue;
  }

  .m-datepicker__check-wrapper {
    @include check-mark-animated-wrapper();
    position: relative;
    margin: -3px 0 0 10px;
  }

  .m-datepicker__check {
    @include check-mark-animated();
    position: absolute;
    left: 0;
  }
}

// This is not an official breakpoint and might become obsolete with a redesign.
// It is only necessary because the datepicker would be too wide for the smallest screens.
@media (min-width: 380px) {
  axa-datepicker .m-datepicker{
    &__wrap {
      margin: 0 20px;
    }

    &__button {
      display: block;
    }
  }
}
