@spaced-out/ui-design-system/lib/components/DateRangePicker/Day.module.css

Sense UI components library

@value (
  size2,
  size4,
  size5,
  size26,
  size30
) from '../../styles/variables/_size.css';
@value (
  spaceXSmall,
  spaceFluid,
  spaceHalfFluid
) from '../../styles/variables/_space.css';
@value (
  borderRadiusNone,
  borderRadiusCircle
) from '../../styles/variables/_border.css';
@value (
  colorFocusPrimary,
  colorBackgroundTertiary,
  colorBackgroundSecondary,
  colorButtonFillGhostHovered,
  colorButtonFillPrimaryEnabled,
  colorButtonFillSecondaryEnabled
) from '../../styles/variables/_color.css';
@value (
  borderWidthNone,
  borderRadiusSmall,
  borderRadiusCircle,
  borderWidthTertiary
) from '../../styles/variables/_border.css';

.calendarItemButton {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(size30 + size2);
}

.calendarItemButton:focus {
  box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.calendarRowItem {
  justify-content: center;
  align-self: center;
  width: spaceFluid;
  padding: size5;
  cursor: pointer;
  border-radius: borderRadiusCircle;
  box-sizing: border-box;
  width: size26;
  height: size26;
  outline: none;
}

.calendarRowItemHover {
  background-color: colorButtonFillGhostHovered;
}

.calendarRowItemDisabled {
  pointer-events: none;
  outline: none;
}

.calendarRowItemFilled {
  background-color: colorButtonFillPrimaryEnabled;
}

.calendarRowItemOutlined {
  composes: borderPrimary from '../../styles/border.module.css';
  border-color: colorButtonFillPrimaryEnabled;
  padding: calc(size4 + size2) spaceXSmall;
}

.calendarRowItemHighlighted {
  border-radius: borderRadiusNone;
  background-color: colorBackgroundSecondary;
}

.calendarRowItemInDateRange {
  border-radius: borderRadiusNone;
  background-color: colorButtonFillSecondaryEnabled;
}