@layer clickui {/* Design tokens use camelCase segments (e.g. datePicker, dateOption). */
/* stylelint-disable custom-property-pattern */

.clickable-title__CXLxz {
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--click-datePicker-dateOption-radii-default);
  background: transparent;
  color: var(--click-datePicker-color-title-default);
  font: var(--click-datePicker-typography-title-default);
  outline: none;
  cursor: pointer;
  user-select: none;
}

.clickable-title__CXLxz:focus,
.clickable-title__CXLxz:focus-visible {
  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
}

.clickable-title__CXLxz:hover {
  background: var(--click-datePicker-dateOption-color-background-hover);
}

.date-picker-container__-WW7c {
  background: var(--click-datePicker-dateOption-color-background-default);
}

.date-table__LSuG6 {
  width: 250px;
  font: var(--typography-styles-product-text-normal-md);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  user-select: none;
}

.date-table__LSuG6 tbody {
  cursor: pointer;
}

.date-table__LSuG6 td,
.date-table__LSuG6 th {
  padding: 4px;
}

.date-table__LSuG6 thead tr {
  height: var(--click-datePicker-dateOption-size-height);
}

.date-table-cell__2SA9O {
  border: var(--click-datePicker-dateOption-stroke) solid
    var(--click-datePicker-dateOption-color-stroke-default);
  border-radius: var(--click-datePicker-dateOption-radii-default);
  font: var(--click-datePicker-dateOption-typography-label-default);
  text-align: center;
  outline: none;
}

.date-table-cell__2SA9O:focus,
.date-table-cell__2SA9O:focus-visible {
  border: var(--click-datePicker-dateOption-stroke) solid
    var(--click-datePicker-dateOption-color-stroke-hover);
  outline: none;
}

.date-table-cell__2SA9O:hover {
  border: var(--click-datePicker-dateOption-stroke) solid
    var(--click-datePicker-dateOption-color-stroke-hover);
  border-radius: var(--click-datePicker-dateOption-radii-default);
}

.date-table-cell_disabled__s7GCx:focus,
.date-table-cell_disabled__s7GCx:focus-visible {
  border-color: var(--click-datePicker-dateOption-color-stroke-disabled);
}

.date-table-cell_disabled__s7GCx:hover {
  border-color: var(--click-datePicker-dateOption-color-stroke-disabled);
}

/* (!isCurrentMonth || isDisabled) */
.date-table-cell_muted__qGOGf {
  color: var(--click-datePicker-dateOption-color-label-disabled);
  font: var(--click-datePicker-dateOption-typography-label-disabled);
}

/* isPresent && !isSelected */
.date-table-cell_present__RVPkq {
  background: var(--click-datePicker-dateOption-color-background-range);
}

.date-table-cell_present__RVPkq:hover {
  background: var(--click-datePicker-dateOption-color-background-range);
}

/* Ordered after `_muted` so the selected color wins for a selected out-of-month
   cell (equal specificity, later declaration wins). */
.date-table-cell_selected__P6-xc {
  background: var(--click-datePicker-dateOption-color-background-active) !important;
  color: var(--click-datePicker-dateOption-color-label-active);
}

.date-table-header__mBVXt {
  width: 14%;
  color: var(--click-datePicker-color-daytitle-default);
  font: var(--click-datePicker-typography-daytitle-default);
}

.empty-date-select-nav__h2d5u {
  visibility: hidden;
  pointer-events: none;
}

.grid-cell__8VIXB {
  display: flex;
  min-height: 26px;
  padding: 8px 4px;
  justify-content: center;
  align-items: center;
  border: var(--click-datePicker-dateOption-stroke) solid
    var(--click-datePicker-dateOption-color-stroke-default);
  border-radius: var(--click-datePicker-dateOption-radii-default);
  background: var(--click-datePicker-dateOption-color-background-default);
  color: var(--click-datePicker-dateOption-color-label-default);
  font: var(--click-datePicker-dateOption-typography-label-default);
  text-align: center;
  cursor: pointer;
}

.grid-cell__8VIXB:focus {
  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
  outline: none;
}

.grid-cell__8VIXB:focus-visible {
  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
  outline: none;
}

.grid-cell__8VIXB:hover {
  border-color: var(--click-datePicker-dateOption-color-stroke-hover);
}

.grid-cell_active__mIy9X {
  background: var(--click-datePicker-dateOption-color-background-active);
  color: var(--click-datePicker-dateOption-color-label-active);
}

.grid-cell_present__t3KSM {
  background: var(--click-datePicker-dateOption-color-background-range);
}

.grid-container__PbYrA {
  display: grid;
  padding: 0.25rem 0 0;
  gap: calc(var(--click-datePicker-space-gap) * 2);
}

/* HighlightedInputWrapper = styled(InputWrapper). The doubled class beats the
   InputWrapper base `.wrapper` (0,1,0) for the width override and the active
   border. The resting default border and the error border are identical to
   what the InputWrapper base / `.wrapper_error` already render, so they are not
   re-declared here. */
.highlighted-input-wrapper__tel22.highlighted-input-wrapper__tel22 {
  width: 250px;
}

.highlighted-input-wrapper_active__Me-wJ.highlighted-input-wrapper_active__Me-wJ {
  border-color: var(--click-datePicker-dateOption-color-stroke-active);
}

/* Base `.wrapper:hover` (0,1,1) loses to the doubled active class, so re-assert
   the hover border for the active (non-error) input to preserve the original
   hover-over-active behavior. */
.highlighted-input-wrapper_active__Me-wJ.highlighted-input-wrapper_active__Me-wJ:hover {
  border-color: var(--click-field-color-stroke-hover);
}

.highlighted-input-wrapper_fill-width__Yjvys.highlighted-input-wrapper_fill-width__Yjvys {
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled-components used this width; preserved for byte-for-byte parity. */
  width: max-content;
  min-width: 250px;
}

.months-grid__DSh1q {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* PickerNavControl = styled(IconButton) with `&&`. The IconButton ghost focus
   rule is `.iconbutton_type_ghost:not([disabled]):focus` (0,3,0), so the focus
   override needs (0,4,0) — a tripled class plus the pseudo — to win. */
.picker-nav-control__DWXpi.picker-nav-control__DWXpi.picker-nav-control__DWXpi:focus,
.picker-nav-control__DWXpi.picker-nav-control__DWXpi.picker-nav-control__DWXpi:focus-visible {
  border: var(--click-datePicker-dateOption-stroke) solid
    var(--click-datePicker-dateOption-color-stroke-hover);
  outline: none;
}

/* StyledDropdownItem = styled(Dropdown.Item). Doubled to beat the
   `.dropdown-menu-item` base min-height (0,1,0). */
.styled-dropdown-item__3ck-T.styled-dropdown-item__3ck-T {
  box-sizing: content-box;
  min-height: 24px;
}

.unselectable-title__OaxFE {
  margin: 0;
  padding: 0;
  color: var(--click-datePicker-color-title-default);
  font: var(--click-datePicker-typography-title-default);
  user-select: none;
}

.years-grid__oB0tx {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
}