.ssp-date-picker {
  position: relative;
  display: grid;
  gap: 0.5rem;
  color: var(--ssp-date-picker-text, #18211f);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
}

.ssp-date-picker [hidden] {
  display: none !important;
}

.ssp-date-picker__label {
  color: var(--ssp-date-picker-label-text, #33413d);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.ssp-date-picker__input {
  block-size: 2.75rem;
  border: 1px solid var(--ssp-date-picker-border, #c7d1cc);
  border-radius: 0.375rem;
  color: #111816;
  font: inherit;
  font-size: 1rem;
  inline-size: 100%;
  outline: none;
  padding-inline: 0.75rem;
}

.ssp-date-picker__input:focus {
  border-color: var(--ssp-date-picker-accent, #11735f);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ssp-date-picker-accent, #11735f) 20%, transparent);
}

.ssp-date-picker__popover {
  position: absolute;
  inset-block-start: calc(100% + 0.375rem);
  inset-inline-start: 0;
  z-index: var(--ssp-date-picker-z-index, 20);
  inline-size: max(100%, var(--ssp-date-picker-popover-min-width, 18rem));
  max-inline-size: var(--ssp-date-picker-popover-max-width, min(94vw, 22rem));
  display: grid;
  gap: 0.625rem;
  border: 1px solid var(--ssp-date-picker-border, #d8e0dc);
  border-radius: var(--ssp-date-picker-radius, 0.5rem);
  background: var(--ssp-date-picker-bg, #fff);
  padding: 0.75rem;
  box-shadow: var(
    --ssp-date-picker-popover-shadow,
    0 12px 24px -12px rgb(10 30 25 / 25%),
    0 2px 8px rgb(10 30 25 / 10%)
  );
}

.ssp-date-picker__day-view,
.ssp-date-picker__month-grid,
.ssp-date-picker__year-grid {
  display: grid;
  gap: 0.5rem;
}

.ssp-date-picker__header-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.ssp-date-picker__header {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ssp-date-picker-text, #18211f);
}

.ssp-date-picker__header-button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}

.ssp-date-picker__header-button:hover {
  background: var(--ssp-date-picker-disabled-bg, #eef2f0);
}

.ssp-date-picker__nav {
  block-size: 2rem;
  inline-size: 2rem;
  border: 1px solid var(--ssp-date-picker-border, #c7d1cc);
  border-radius: 0.375rem;
  background: var(--ssp-date-picker-bg, #fff);
  color: var(--ssp-date-picker-text, #18211f);
  cursor: pointer;
  font-size: 1rem;
}

.ssp-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

.ssp-date-picker__weekday {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ssp-date-picker-label-text, #33413d);
  text-transform: uppercase;
}

.ssp-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.ssp-date-picker__day,
.ssp-date-picker__month-option,
.ssp-date-picker__year-option {
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: var(--ssp-date-picker-bg, #fff);
  color: var(--ssp-date-picker-text, #18211f);
  cursor: pointer;
  font: inherit;
  min-block-size: var(--ssp-date-picker-day-size, 2.25rem);
}

.ssp-date-picker__day[data-outside-month="true"] {
  color: var(--ssp-date-picker-disabled-text, #8a9692);
}

.ssp-date-picker__day[data-today="true"] {
  border-color: var(--ssp-date-picker-accent, #11735f);
}

.ssp-date-picker__day[data-selected="true"],
.ssp-date-picker__month-option[data-selected="true"] {
  background: var(--ssp-date-picker-accent-bg, #dff4eb);
  color: var(--ssp-date-picker-accent-text, #0a4f42);
  font-weight: 700;
}

.ssp-date-picker__day[data-focused="true"] {
  box-shadow: 0 0 0 2px var(--ssp-date-picker-accent, #11735f);
}

.ssp-date-picker__day:disabled,
.ssp-date-picker__month-option:disabled,
.ssp-date-picker__year-option:disabled {
  background: var(--ssp-date-picker-disabled-bg, #eef2f0);
  color: var(--ssp-date-picker-disabled-text, #8a9692);
  cursor: not-allowed;
  opacity: 0.7;
}

.ssp-date-picker__month-options,
.ssp-date-picker__year-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.ssp-date-picker__footer {
  display: flex;
  justify-content: flex-end;
}

.ssp-date-picker__today-button {
  border: 1px solid var(--ssp-date-picker-border, #c7d1cc);
  border-radius: 0.375rem;
  background: var(--ssp-date-picker-bg, #fff);
  color: var(--ssp-date-picker-accent, #11735f);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.375rem 0.75rem;
}