@import "datepicker-config";

/* -------------------------------------------------
    Datepicker cells
   ------------------------------------------------- */

.datepicker--cells {
  display: flex;
  flex-wrap: wrap;
}

.datepicker--cell {
  border-radius: $datepickerBorderRadius;
  color: $textColor;
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: $dayCellSize;
  height: $dayCellSize;
  z-index: 1;

  &:hover {
    background: $colorCellHover;
  }

  &.-current- {
    color: $colorCellCurrent;

    &:hover {
      background: rgba($colorCellCurrent, .05);
    }
  }

  &.-disabled- {
    cursor: default;
    color: $colorGrey;
    background: none;
  }

  &.-selected- {
    color: #fff;
    background: $colorCellSelected;

    &.-current- {
      color: #fff;
      background: $colorCellSelected;
    }
  }
}

//  Day cell
// -------------------------------------------------

.datepicker--cell-day {
  border-radius: 50%;

  &.-other-month- {
    color: $colorAnotherMonth;

    &.-selected- {
      color: #fff;
      background: lighten($colorCellSelected, 20%);

      &.-disabled- {
        background: none;
        border: none;
      }

    }
  }
}


//  Months
// -------------------------------------------------

.datepicker--months {}

//  Month cells
// -------------------------

.datepicker--cell-month {
  width: 33.33%;
  height: 40px;
}

//  Years
// -------------------------------------------------

.datepicker--years {}

//  Month cells
// -------------------------

.datepicker--cell-year {
  width: 100% / $yearsPerRow;
  height: 40px;

  &.-another-decade- {
    color: $colorAnotherMonth;
  }
}