import Box from '../box';
import { css, styled, th } from '../core';
import Link from '../link';
export const boundary = css `
  background-color: ${th.color('seaBlue.main')};
  color: white !important;
  border-radius: 0;
`;
export const current = css `
  background-color: ${th.color('seaBlue.main')};
  color: white !important;
  border-radius: 0;
`;
export const isDisabled = css `
  background-color: ${th.color('sandstone.97')} !important;
  color: ${th.color('sandstone.55')} !important;
  cursor: not-allowed;
`;
export const isHidden = css `
  color: ${th.color('sandstone.55')} !important;
`;
export const isToday = css `
  border: 1px solid ${th.color('seaBlue.main')};
`;
export const hover = css `
  background-color: ${th.color('skyBlue.85')};
  color: ${th.color('seaBlue.main')};
  border-radius: 0;
`;
export const isSelected = css `
  background-color: ${th.color('skyBlue.85')};
  border-radius: 0;
  color: white;
`;
export const CalendarItem = styled(Link) `
  aspect-ratio: 1;
  border: 0;
  cursor: pointer;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;

  ${p => p.isHidden && isHidden}
  ${p => p.isToday && isToday}
  ${p => p.isDisabled && isDisabled}
    ${p => p.isSelected && isSelected}
    ${p => p.boundary && boundary}
    ${p => p.current && current}

    &:hover {
    color: inherit;
    text-decoration: none;

    ${p => !p.isDisabled && hover}
  }
`;
export const CalendarItemsContainer = styled(Box) `
  align-items: center;
  column-gap: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 62px);
  justify-items: center;
  row-gap: 0;
`;
//# sourceMappingURL=calendar.styles.js.map