//@use "./shared";
//@use "./global-components";

@use "./themes";
@use "./global-spacing";
// Get rid of root as soon as. and use theme variables instead
@use "./root";

// Needed components for positioning
@use "./shared";

// External components
@use "../node_modules/air-datepicker/air-datepicker.css";

.air-datepicker {
  --adp-color: rgba(var(--zn-text), var(--zn-text-opacity));
  --adp-nav-color-secondary: rgb(var(--zn-purple-text));

  --adp-day-name-color: var(--zn-color-primary-600);
  --adp-day-name-color-hover: var(--zn-color-primary-700);
  --adp-cell-background-color-selected: var(--zn-color-primary-600);
  --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
  --adp-color-current-date: var(--zn-color-primary-600);

  --adp-background-color: var(--zn-input-background-color);
  --adp-background-color-hover: var(--zn-input-background-color-hover);
  --adp-background-color-active: var(--zn-input-background-color-hover);
  --adp-background-color-selected-other-month: var(--zn-color-primary-300);
  --adp-background-color-in-range: var(--zn-color-primary-100);

  --adp-border-color: rgb(var(--zn-border-color));
  --adp-border-color-inline: rgb(var(--zn-border-color));
  --adp-border-color-inner: rgb(var(--zn-border-color));

  --adp-cell-background-color-in-range: var(--zn-color-primary-100);
  --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
}

.air-datepicker--pointer:after {
  background-color: var(--zn-input-background-color);
}

.air-datepicker-global-container {
  z-index: 1000000;
}

.air-datepicker-button {
  border: none;
  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
  border-radius: var(--adp-border-radius);
  font-family: var(--adp-font-family), sans-serif;
  font-size: var(--zn-font-size-medium);
  font-weight: var(--zn-font-weight-normal);
  cursor: pointer;
  color: rgba(var(--zn-text), var(--zn-text-opacity));

  &:hover {
    background-color: var(--zn-input-background-color-hover) !important;
  }
}

// Utility to minimize flashing of undefined web components
.zn-cloak:has(:not(:defined)) {
  animation: 2s step-end zn-cloak;
}

@keyframes zn-cloak {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}