@gez/date-time-kit/dist/components/calendar/index.css.mjs

var __freeze = Object.freeze;
var __defProp = Object.defineProperty;
var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
var _a, _b;
import { css, dirLtr } from "../../utils/index.mjs";
export default css(_b || (_b = __template(["\n:host {\n  --gap: var(--calendar-item-gap, 10px 0);\n  --item-size: var(--calendar-item-size, 30px);\n  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);\n  --color-active-bg: var(--calendar-item-active-bg, #002BE7);\n  --color-active-text: var(--calendar-item-active-text, #fff);\n  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-in-range-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n  --color-active-hover-bg: var(--calendar-item-active-hover-bg, var(--color-active-bg));\n  --color-active-hover-text: var(--calendar-item-active-hover-text, var(--color-active-text));\n}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--gap);\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  text-align: center;\n}\n\n.week {\n  min-width: var(--item-size);\n  display: inline-block;\n}\n\n.item {\n  min-width: var(--item-size);\n  line-height: var(--item-size);\n  height: var(--item-size);\n  position: relative;\n  --half-period-bg-w: calc(50% + var(--item-size) / 2);\n}\n.item span {\n  position: relative;\n  z-index: 2;\n}\n.item:not(.disabled) {\n  cursor: pointer;\n}\n:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {\n  cursor: not-allowed;\n  color: var(--color-disabled-text);\n}\n.item:hover {\n  color: var(--color-hover-text);\n}\n.item.in-range {\n  color: var(--color-in-range-text);\n}\n.item:not(.disabled) .highlight {\n  display: block;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--item-size);\n  height: var(--item-size);\n  transform: translate(-50%, -50%);\n}\n.item.start, .item.end {\n  color: var(--color-active-text);\n}\n.item.start .highlight, .item.end .highlight {\n  background-color: var(--color-active-bg);\n}\n.item:hover .highlight {\n  background-color: var(--color-hover-bg);\n}\n.item.start:hover .highlight, .item.end:hover .highlight {\n  background-color: var(--color-active-hover-bg);\n}\n.item.start:hover, .item.end:hover {\n  color: var(--color-active-hover-text);\n}\n.item.in-range .bg {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 43, 231, 0.1490196078);\n}\n.item:nth-of-type(7n + 1) .bg {\n  border-radius: var(--item-size) 0 0 var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item:nth-of-type(7n) .bg {\n  border-radius: 0 var(--item-size) var(--item-size) 0;\n  width: var(--half-period-bg-w);\n}\n.item:nth-of-type(7n).range-start .bg {\n  width: var(--item-size);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n}\n.item.range-start.range-end .bg {\n  width: var(--item-size);\n}\n.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {\n  width: var(--item-size);\n}\n\n", "\n"])), dirLtr(css(_a || (_a = __template(["\n.item .bg:dir(ltr) { border-radius: 0; }\n.item.in-range .bg:dir(ltr) { left: auto; right: 0; }\n.item:nth-of-type(7n + 1) .bg:dir(ltr) { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n) .bg:dir(ltr) { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n).range-start .bg:dir(ltr) { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item.range-start .bg:dir(ltr) {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg:dir(ltr) {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n"])))));