@value (
  size5,
  size30
) from '../../styles/variables/_size.css';
@value (
  spaceNone,
  spaceSmall,
  spaceLarge,
  spaceFluid,
  spaceXSmall,
  spaceHalfFluid
) from '../../styles/variables/_space.css';
@value (
  borderRadiusCircle
) from '../../styles/variables/_border.css';

.calendar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: spaceHalfFluid;
  padding: spaceXSmall spaceLarge;
  gap: spaceNone;
}

.calendarMobile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: spaceFluid;
  padding: spaceXSmall spaceLarge;
  gap: spaceNone;
}

.calendarRow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  height: calc(size30 + size2);
  box-sizing: border-box;
}

.calendarRowItem {
  justify-content: center;
  align-self: center;
  width: spaceFluid;
  padding: size5;
  cursor: pointer;
  border-radius: borderRadiusCircle;
  box-sizing: border-box;
  width: calc(size30 + size2);
  height: calc(size30 + size2);
}

.selectedDate {
  display: flex;
  justify-content: center;
  margin: spaceSmall spaceNone;
}