@import "./datetime.scss";
@import "./datetime.md.vars.scss";
@import "../../themes/ionic.globals.md";

:host {
  --background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
  --title-color: #{current-color(contrast)};
}

// Header
// -----------------------------------
:host .datetime-header {
  @include padding($datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding);

  background: current-color(base);
  color: var(--title-color);
}

:host .datetime-header .datetime-title {
  font-size: $datetime-md-title-font-size;

  text-transform: uppercase;
}

:host .datetime-header .datetime-selected-date {
  @include margin(30px, null, null, null);

  font-size: $datetime-md-selected-date-font-size;
}

// Calendar / Header / Action Buttons
// -----------------------------------

:host .calendar-action-buttons ion-button {
  --color: #{$text-color-step-350};
}

.calendar-month-year-toggle {
  @include padding(12px, 16px, 12px, #{$datetime-md-header-padding});

  min-height: 48px;

  background: transparent;

  color: #{$text-color-step-350};

  z-index: 1;

  &.ion-focused::after {
    opacity: 0.04;
  }
}

.calendar-month-year-toggle ion-ripple-effect {
  color: currentColor;
}

@media (any-hover: hover) {
  .calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover {
    &::after {
      background: currentColor;

      opacity: 0.04;
    }
  }
}

// Calendar / Header / Days of Week
// -----------------------------------
:host .calendar-days-of-week {
  @include padding(0px, 10px, 0px, 10px);

  color: $text-color-step-500;

  font-size: $datetime-md-calendar-item-font-size;

  line-height: 36px;
}

// Calendar / Body
// -----------------------------------
:host .calendar-body .calendar-month .calendar-month-grid {
  @include padding(4px, 10px);

  /**
   * Calendar on MD will show an empty row
   * if not enough dates to fill 6th row.
   * Calendar on iOS fits all dates into
   * a fixed number of rows and resizes
   * if necessary.
   */
  grid-template-rows: repeat(6, 1fr);
}

// Individual day button in month
:host .calendar-day {
  width: $datetime-md-day-width;
  min-width: $datetime-md-day-width;

  height: $datetime-md-day-height;

  font-size: $datetime-md-calendar-item-font-size;
}

/**
 * Day that today but not selected
 * should have ion-color for text color.
 */
:host .calendar-day.calendar-day-today {
  border: 1px solid current-color(base);

  color: current-color(base);
}

/**
 * Day that is not today but
 * is selected should have ion-color for
 * text color and be bolder.
 */
:host .calendar-day.calendar-day-active,
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
  color: current-color(contrast);
}

.calendar-day.calendar-day-active,
.calendar-day.calendar-day-active:focus {
  border: 1px solid current-color(base);

  background: current-color(base);
}

:host .calendar-day.calendar-day-adjacent-day {
  color: $text-color-step-500;
}

// Time / Header
// -----------------------------------
:host .datetime-time {
  @include padding($datetime-md-padding * 0.5, $datetime-md-padding, $datetime-md-padding * 0.5, $datetime-md-padding);
}

:host .time-header {
  color: #{$text-color-step-350};
}

// Month and Year
// -----------------------------------

/**
 * Add some margin when only selecting month/year
 * otherwise layout will too constricted.
 */
:host(.datetime-presentation-month) .datetime-year,
:host(.datetime-presentation-year) .datetime-year,
:host(.datetime-presentation-month-year) .datetime-year {
  @include margin(20px, null, 20px, null);
}

// Footer
// -----------------------------------
:host .datetime-buttons {
  @include padding(10px, 10px, 10px, 10px);

  display: flex;

  align-items: center;

  justify-content: flex-end;
}