datetime.ionic.scss

@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./datetime.common";

// Ionic Datetime
// --------------------------------------------------

:host {
  /**
   * @prop --focus-ring-color: The color of the ring around the focused element.
   * @prop --focus-ring-width: The width of the ring around the focused element.
   */
  --background: #{globals.$ion-bg-surface-default};
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-radius-025};
  /**
   * TODO(FW-6931): Remove these variables upon solving the root cause
   */
  --body-opacity: 0;
  --year-opacity: 0;
}

/**
   * TODO(FW-6931): Remove all this css related to opacity upon solving the root cause
   */
:host .calendar-body {
  opacity: var(--body-opacity);
}

:host .datetime-year {
  opacity: var(--year-opacity);
}

:host(.datetime-ready) .calendar-body {
  --body-opacity: 1;
}

:host(.datetime-ready) .datetime-year {
  --year-opacity: 1;
}

// Header
// -----------------------------------
:host .datetime-header {
  @include globals.padding(
    globals.$ion-space-200,
    globals.$ion-space-400,
    globals.$ion-space-400,
    globals.$ion-space-400
  );

  display: flex;

  flex-direction: column;
  align-items: start;
  justify-content: space-between;

  height: globals.$ion-scale-1400;

  margin-bottom: globals.$ion-space-200;

  border-bottom: globals.$ion-border-style-solid globals.$ion-border-size-025 globals.$ion-primitives-neutral-400;
}

:host .datetime-header .datetime-title {
  @include globals.typography(globals.$ion-heading-h6-medium);

  color: globals.$ion-primitives-neutral-800;
}

:host .datetime-header .datetime-selected-date {
  @include globals.typography(globals.$ion-body-md-regular);

  color: globals.$ion-primitives-neutral-1000;
}

// Calendar Header
// -----------------------------------

.calendar-action-buttons {
  @include globals.padding(globals.$ion-space-200, null);

  align-items: center;

  height: globals.$ion-scale-1400;

  box-sizing: border-box;
}

.calendar-month-year {
  flex: 1 0 0;
}

// Month year toggle should match the
// default round clear button style
.calendar-month-year-toggle {
  @include globals.border-radius(globals.$ion-border-radius-full);
  @include globals.typography(globals.$ion-body-action-md);
  @include globals.padding(globals.$ion-space-200, globals.$ion-space-400);

  min-width: globals.$ion-scale-1600;
  min-height: globals.$ion-scale-1000;

  border: var(--focus-ring-width) globals.$ion-border-style-solid transparent;

  color: globals.$ion-semantics-primary-base;
}

// Hovered Month Year Toggle
@media (any-hover: hover) {
  .calendar-month-year-toggle:hover {
    background: globals.$ion-primitives-neutral-200;
  }
}

// Focused Month Year Toggle
.calendar-month-year-toggle.ion-focused {
  border-color: var(--focus-ring-color);
}

// Activated Month Year Toggle
.calendar-month-year-toggle.ion-activated {
  background: globals.$ion-primitives-neutral-200;
}

// TODO(ROU-11119): Rewrite this when we replace the ion-button with a native button
.calendar-next-prev ion-button.button-has-icon-only {
  --color: #{globals.$ion-primitives-neutral-1000};
  --background-activated: #{globals.$ion-primitives-neutral-200};
  --background-hover: #{globals.$ion-primitives-neutral-200};
  --background-hover-opacity: 1;
  min-height: globals.$ion-scale-1000;
}

// TODO(ROU-11119): Rewrite this when we replace the ion-button with a native button
.calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native) {
  border: globals.$ion-border-size-050 globals.$ion-border-style-solid globals.$ion-border-focus-default;

  outline: none;
}

// Calendar Days of Week
// -----------------------------------

.calendar-days-of-week {
  @include globals.typography(globals.$ion-overline-medium);

  align-content: center;

  height: globals.$ion-scale-1200;

  color: globals.$ion-primitives-neutral-800;
}

// Calendar Day
// -----------------------------------

.calendar-day {
  @include globals.border-radius(globals.$ion-border-radius-full);
  @include globals.padding(globals.$ion-space-100);
  @include globals.typography(globals.$ion-body-action-sm);

  width: globals.$ion-scale-1200;
  min-width: globals.$ion-scale-1200;

  height: globals.$ion-scale-1200;

  color: globals.$ion-text-default;
}

// Disabled Day
.calendar-day[disabled]:not(.calendar-day-constrained) {
  color: globals.$ion-primitives-neutral-500;
}

// Current Day
.calendar-day.calendar-day-today {
  color: globals.$ion-semantics-primary-base;
}

// Selected Day
.calendar-day.calendar-day-active,
.calendar-day.calendar-day-active.calendar-day-adjacent-day {
  background: globals.$ion-semantics-primary-100;
}

// Focused Day
.calendar-day:focus-visible {
  border: var(--focus-ring-width) globals.$ion-border-style-solid var(--focus-ring-color);
}

// Hovered Day
@media (any-hover: hover) {
  .calendar-day:not([disabled]):not(:active):hover {
    background: globals.$ion-semantics-primary-200;
  }
}

// Pressed Day
.calendar-day:active,
.calendar-day.calendar-day-adjacent-day:active {
  background: globals.$ion-bg-primary-subtle-press;
}

// Adjacent Day
.calendar-day.calendar-day-adjacent-day {
  color: globals.$ion-text-subtlest;
}

// Selected Adjacent Day
.calendar-day.calendar-day-active.calendar-day-adjacent-day {
  color: globals.$ion-text-default;
}

// Time / Header
// -----------------------------------
:host .datetime-time {
  @include globals.padding(globals.$ion-space-100, globals.$ion-space-400);
}

:host .datetime-time .time-header {
  @include globals.typography(globals.$ion-body-action-md);

  color: globals.$ion-primitives-neutral-800;
}

:host .datetime-time button {
  @include globals.padding(globals.$ion-space-0, globals.$ion-space-200);
  @include globals.typography(globals.$ion-body-md-medium);
  @include globals.border-radius(globals.$ion-border-radius-full);

  display: flex;

  align-items: center;

  height: globals.$ion-scale-800;

  background-color: globals.$ion-primitives-neutral-100;
  color: globals.$ion-text-default;
}

// Calendar / Footer / Action Buttons
// -----------------------------------
:host .datetime-footer {
  @include globals.padding(globals.$ion-space-200, 0, 0, 0);
  @include globals.margin(globals.$ion-space-200, 0, 0, 0);
  @include globals.border(
    globals.$ion-border-style-solid globals.$ion-border-size-025 globals.$ion-primitives-neutral-400,
    0,
    0,
    0
  );
}

:host .datetime-buttons .datetime-action-buttons,
.datetime-action-buttons .datetime-action-buttons-container,
::slotted([slot="buttons"]) {
  flex-flow: column;
  align-items: stretch;
  gap: globals.$ion-space-200;
}