import e, { css as a } from "styled-components";
import { getSpacing as r, getFontSize as d, getColorAlias as s, convertToTransientProps as p } from "../../../../utils/index.js";
import { Wrapper as i } from "../day/styles.js";
const h = e.div`
  min-width: 312px;

  @media (max-width: 420px) {
    min-width: 0;
  }
`;
e.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: ${r("s04", "s05")};
  font-weight: ${(t) => t.theme.font.weightExtrabold};
  ${d("size16")};
  color: ${s("contentDefault")};
`;
e.div`
  display: flex;
`;
e.span`
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  ${d("size14")};
  font-weight: ${(t) => t.theme.font.weightRegular};
  color: ${s("contentDisabled")};
  margin: ${r("s00", "s02")};
`;
function n(t, o) {
  return t === 0 ? o ? "7n" : "7n + 1" : o ? `7n - ${t - 1}` : `7n - ${t - 2}`;
}
const c = e.div.withConfig({
  shouldForwardProp: p(["startColumn"])
})`
  padding: ${r("s00", "s04", "s04")};
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  ${({ startColumn: t }) => a`
      ${i}:nth-child(${n(t, !0)}) {
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
      }
      ${i}:nth-child(${n(t, !1)}) {
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }
      ${i}:first-of-type {
        grid-column: ${t};
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
      }
    `}
  ${i}:last-child {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
  }
`, $ = e.div`
  padding: ${r("s04")};
  margin-left: ${r("s02")};
  font-weight: ${(t) => t.theme.font.weightExtrabold};
`;
export {
  h as CalendarWrapper,
  c as Dates,
  $ as NarrowMonth
};
