/* Leaving, will most likely get deleted */
.datePicker {
  container-name: datePickerContainer;
  container-type: inline-size;
}
.container {
  display: grid;
  gap: var(--Spacing-x2);
  grid-template-areas: "year month day";
  grid-template-columns: 1fr 1fr 1fr;
  width: var(--width);
}

.day {
  grid-area: day;
}

.month {
  grid-area: month;
}

.year {
  grid-area: year;
}

/* TODO: Handle this in Select component.
   - out of scope for now.
*/
.day.invalid > div > div,
.month.invalid > div > div,
.year.invalid > div > div {
  border-color: var(--Scandic-Red-60);
}

@container datePickerContainer (max-width: 350px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}