import n, { css as d } from "styled-components";
import { getFontSize as a, getSpacing as s, getColorAlias as e, convertToTransientProps as o } from "../../../../utils/index.js";
const h = n.div.withConfig({
  shouldForwardProp: o([
    "isInRange",
    "isStartDay",
    "isEndDay",
    "disabled"
  ])
})`
  display: flex;
  justify-content: center;
  align-items: center;
  ${a("size16")};
  cursor: ${(t) => t.disabled ? "not-allowed" : "pointer"};
  margin: ${s("s02", "s00")};
  padding: 0 1px;

  ${({ isInRange: t, isStartDay: r, isEndDay: i }) => d`
      background: ${t || r && !i ? e("interactiveSecondary") : "transparent"};
      border-bottom-right-radius: ${i ? "20px" : "0"};
      border-top-right-radius: ${i ? "20px" : "0"};
      border-bottom-left-radius: ${r ? "20px" : "0"};
      border-top-left-radius: ${r ? "20px" : "0"};
    `}
`;
function u(t, r, i) {
  return t && i ? e("backgroundDefault") : r ? e("interactivePrimary") : t ? e("containerStrong") : "transparent";
}
function c(t, r, i) {
  return i ? e("disabled01") : t ? e("contentInteractivePrimary") : r ? e("contentInteractiveTertiary") : e("contentDisabled");
}
const f = n.div.withConfig({
  shouldForwardProp: o([
    "isStartEndDay",
    "isToday",
    "isCurrentMonth",
    "width"
  ])
})`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: ${(t) => t.width}px;
  height: ${(t) => t.width}px;
  font-weight: ${(t) => t.isToday ? t.theme.font.weightExtrabold : t.theme.font.weightRegular};
  color: ${(t) => c(t.isStartEndDay, t.isCurrentMonth, t.disabled)};
  border-radius: ${(t) => t.isToday || t.isStartEndDay ? t.theme.radius.roundedE : t.theme.radius.roundedNone};
  background: ${(t) => u(t.isToday, t.isStartEndDay, t.disabled)};
  position: relative;

  &:focus {
    border-radius: ${(t) => t.theme.radius.roundedE};
  }

  @media (max-width: 325px) {
    padding: 1px 3px;
  }
`, m = n.div`
  height: 4px;
  width: 4px;
  background-color: ${e("interactiveBrand")};
  border-radius: ${(t) => t.theme.radius.roundedE};
  position: absolute;
  top: min(30px, 85%);
`;
export {
  f as DayNum,
  m as Event,
  h as Wrapper
};
