@import "datepicker-config";

/* -------------------------------------------------
    Navigation
   ------------------------------------------------- */

.datepicker--nav {
  border-bottom: 1px solid $colorGrey;
  display: flex;
  justify-content: space-between;
  height: $navigationHeight;
}

.datepicker--nav-title,
.datepicker--nav-action {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.datepicker--nav-action {
  width: $dayCellSize;

  &:hover {
    background: $colorCellHover;
  }

  &.-disabled- {
    visibility: hidden;
  }
}

.datepicker--nav-title {
  align-self: center;
  padding: 4px;
  border-radius: $datepickerBorderRadius;

  &:hover {
    background: $colorCellHover;
  }

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

//  Buttons
// -------------------------------------------------

.datepicker--buttons {
  display: flex;
  margin: $navigationButtonsOffset*2 $navigationButtonsOffset;
}

.datepicker--button {
  background: $bgButton;
  cursor: pointer;
  border-radius: $datepickerBorderRadius;
  margin: 0 $navigationButtonsOffset;
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 24px;

  &:hover {
    background: $bgButtonHover;
  }
}