@appearhere/bloom/components/Calendar/DayPicker/DayPickerItem.css

Appear Here's pattern library and styleguide

.root {
  -webkit-touch-callout: none;
  user-select: none;
  composes: fontSmallI from '../../../globals/typography.css';
  color: var(--color-greyDarker);
  cursor: pointer;
}

.highlighted {
  background-color: var(--color-grey);
  color: var(--color-white);
}

.selected {
  background-color: var(--color-greyDarker);
  color: var(--color-white);
}

.disabled {
  pointer-events: none;
  color: var(--color-greyLight);
}

.firstSelected.lastSelected {
  border-radius: 4px;
}

.firstSelected,
.firstHighlighted {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.lastSelected,
.lastHighlighted {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.firstSelected.highlighted:not(.lastHighlighted) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.lastSelected.highlighted:not(.firstHighlighted) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}