.date-picker-container {

position: absolute;
z-index: 11;
width: 392px;
height: auto;

}

%date-picker-calendar {

position: absolute;
width: 392px;
padding: 0 16px;
background-color: $white;
background-clip: border-box;
border: 1px solid $smoke;
border-radius: 4px; // stylelint-disable-line property-blacklist
box-shadow: 0 2px 4px 0 rgba($slate, .1), 0 4px 8px 0 rgba($slate, .2);

}

.date-picker-calendar-view {

@extend %date-picker-calendar;
height: auto;
min-height: 284px;

}

.date-picker-collapse-view {

@extend %date-picker-calendar;
height: auto;
min-height: 244px;

}

.date-picker-header {

display: flex;
align-items: center;
height: 52px;
text-align: center;

}

.date-picker-header-title {

flex-grow: 5;
font-weight: $font-weight-bold;
cursor: pointer;

}

.date-picker-previous-button {

flex-grow: 1;
padding-right: 16px;
text-align: left;
.ic {
  &:hover {
    cursor: pointer;
  }
}

}

.date-picker-next-button {

flex-grow: 1;
padding-left: 16px;
text-align: right;
.ic {
  &:hover {
    cursor: pointer;
  }
}

}

%cell-current-state {

border-radius: 100%; // stylelint-disable-line property-blacklist
-webkit-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix
-moz-box-shadow: inset 0 0 0 1px $primary; // stylelint-disable-line property-no-vendor-prefix
box-shadow: inset 0 0 0 1px $primary;

}

%cell-selected-state {

color: $white !important; // stylelint-disable-line declaration-no-important
background-color: $primary !important; // stylelint-disable-line declaration-no-important
border-radius: 100%; // stylelint-disable-line property-blacklist

}

%cell-disabled-state {

color: $muted !important; // stylelint-disable-line declaration-no-important
background-color: transparent !important; // stylelint-disable-line declaration-no-important
border-radius: 100%; // stylelint-disable-line property-blacklist

&:hover {
  cursor: default;
}

}

%cell-hover {

color: $dark;
cursor: pointer;
background-color: $cloud;
border-radius: 100%; // stylelint-disable-line property-blacklist
-webkit-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
-moz-box-shadow: none; // stylelint-disable-line property-no-vendor-prefix
box-shadow: none; // stylelint-disable-line property-no-vendor-prefix

}

.date-picker-row {

display: flex;
flex-wrap: wrap;
.date-picker-cell {
  flex: 1 1 0;
  margin: 2px 0;
  text-align: center;
  .date-picker-date-cell {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    line-height: 32px;
    &.current-date {
      @extend %cell-current-state;
    }
    &.selected-date {
      @extend %cell-selected-state;
    }
    &.disabled-date {
      @extend %cell-disabled-state;
    }
    &:hover {
      @extend %cell-hover;
    }
  }
  .date-picker-month-cell {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    margin-bottom: 12px;
    line-height: 40px;
    &.current-month {
      @extend %cell-current-state;
    }
    &.selected-month {
      @extend %cell-selected-state;
    }
    &.disabled-month {
      @extend %cell-disabled-state;
    }
    &:hover {
      @extend %cell-hover;
    }
  }
  .date-picker-year-cell {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    margin-bottom: 4px;
    line-height: 48px;
    &.current-year {
      @extend %cell-current-state;
    }
    &.selected-year {
      @extend %cell-selected-state;
    }
    &.disabled-year {
      @extend %cell-disabled-state;
    }
    &:hover {
      @extend %cell-hover;
    }
  }
  &:hover {
    .date-picker-date-cell {
      @extend %cell-hover;
    }
  }
}

}

.date-picker-day-container {

display: flex;
margin-bottom: 16px;
.date-picker-day {
  flex: 1 1 0;
  color: $slate;
  text-align: center;
}

}

.date-picker-shortcut-button {

width: 360px;
padding: 16px 0;
color: $slate;
text-align: center;
cursor: pointer;
&.disabled {
  color: $muted;
  cursor: not-allowed;
}

}

.date-picker-break {

flex-basis: 100%;
height: 0;

}

.date-picker–no-outline {

outline: none;

}