@value (
  varBorderDefault,
  varBackgroundLight,
  varAdditional01Extra300,
  varIconSubtle
) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value (var-sm) from "~@xo-union/tk-ui-breakpoints/lib/variables.css";
@value varMediaSmLow: max-width: var-sm;
.relative-container {
  position: relative;
  z-index: 10;
}

.parent-container {
  flex-direction: column;
}

.is-block {
  display: flex;
}

.is-inline {
  display: inline-flex;
}

.is-closed {
  display: none;
}

.is-open {
  display: block;
}

.dropdown-container {
  background-color: var(--tkww-union-datepicker-background-color, varBackgroundLight);
  border: 1px solid var(--tkww-union-datepicker-border-color, varBorderDefault);
  border-radius: var(--tkww-union-datepicker-border-radius, 4px);
  overflow: hidden;
  position: absolute;
  top: 10px;
}

.picker-container {
  max-width: calc(280px * var(--tkww-union-datepicker-number-of-months, 1) + 20px * (var(--tkww-union-datepicker-number-of-months, 1) + 1));
  padding-bottom: 18px;
  position: relative;
}

.arrow-up {
  color: var(--tkww-union-datepicker-navigation-background-color, varAdditional01Extra300);
  font-size: 48px;
  left: 6px;
  position: absolute;
  top: -19px;
}

.mobile-overlay {
  pointer-events: none;
  z-index: 1;
}

.close-button-container {
  position: absolute;
  right: 7px;
  top: 12px;
  z-index: 1;
}

.close-button {
  composes: subhead from "~@xo-union/tk-ui-typography/lib/font-scale-categories.css";
  color: varIconSubtle;
}

/* Styles in mobile when the DatePicker is Open */
@media (varMediaSmLow) {
  .modal {
    bottom: 0;
    left: 0;
    position: fixed;
    top: auto;
    visibility: var(--union-modal-visibility, visible);
    width: 100%;
    z-index: 2;
  }

  .arrow-up {
    display: none;
  }

  .dropdown-container {
    border-radius: 0;
    position: relative;
  }

  .picker-container {
    max-width: 100%;
  }

  .grid-cell {
    display: grid;
    justify-items: center;
  }
}