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

:host {
  --background: var(--ion-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 .datetime-calendar .calendar-action-buttons ion-item {
  --padding-start: #{$datetime-md-header-padding};
}

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

// 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 {
  /**
   * 3px top padding adds enough spacing at
   * the top of the container for the selected
   * day box shadow to display without clipping.
   */
  @include padding(3px, 10px, 0px, 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 {
  @include padding(13px, 0, 13px, 0px);

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

:host .calendar-day:focus:after {
  background: current-color(base, 0.2);

  box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
}

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

:host .calendar-day.calendar-day-today:after {
  border: 1px solid 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 {
  color: current-color(contrast);
}

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

  background: current-color(base);
}

// 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;
}

:host .datetime-view-buttons ion-button {
  color: $text-color-step-200;
}