@import "./skeleton.css";
@import "./bootstrap/theme.css";

[data-calendar] {
  gap: 0.5rem;
  font-weight: 300;
}

[data-calendar]>div {
  gap: 0.5rem;
}

[data-calendar]>div>div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: initial;
}

[data-calendar]>div:nth-of-type(2)>div {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
}

[role="heading"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 300;
}

[role="heading"]::first-letter {
  text-transform: uppercase
}

[data-day="today"] {
  background-color: var(--bs-primary-bg-subtle) !important;
}

[data-day="0"],
[data-day="6"] {
  background-color: var(--bs-secondary-bg-subtle);
}

[data-day="0"]>div,
[data-day="6"]>div {
  color: var(--bs-tertiary-color);
}