@gez/date-time-kit/dist/components/yyyymm-nav/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;
import {
  arrowDownSvg,
  arrowLeftDoubleSvg,
  arrowLeftSvg,
  arrowRightDoubleSvg,
  arrowRightSvg,
  svg2cssUrl
} from "../../assets/index.mjs";
import { css } from "../../utils/index.mjs";
export default css(_a || (_a = __template(["\n.wrapper {\n  display: block;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n  overflow: hidden;\n}\n.wrapper.show-list .btns {\n  display: none;\n}\n\n.btns {\n  display: flex;\n  align-items: center;\n}\n\n.btn {\n  width: 25px;\n  height: 25px;\n  cursor: pointer;\n  background: 50%/16px 16px no-repeat;\n  --icon-arrow-left: ", ";\n  --icon-arrow-left-double: ", ";\n  --icon-arrow-right: ", ";\n  --icon-arrow-right-double: ", ";\n  border-radius: 50%;\n  position: relative;\n}\n.btn::before {\n  content: '';\n  background-color: var(--dt-text-main, #333);\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-image: var(--bg-img);\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-mask-image: var(--bg-img);\n}\n.btn:hover {\n  background-color: var(--dt-bg-hover, #eee);\n}\n:host(:not([show-ctrl-btn-year-add])) .btn.add.year, :host(:not([show-ctrl-btn-year-sub])) .btn.sub.year, :host(:not([show-ctrl-btn-month-add])) .btn.add.month, :host(:not([show-ctrl-btn-month-sub])) .btn.sub.month {\n  display: none;\n}\n.btn.sub {\n  --bg-img: var(--icon-arrow-left);\n}\n:host([show-ctrl-btn-month-add]) .btn.sub.add.year, :host([show-ctrl-btn-month-sub]) .btn.sub.sub.year {\n  --bg-img: var(--icon-arrow-left-double);\n}\n.btn.add {\n  --bg-img: var(--icon-arrow-right);\n}\n:host([show-ctrl-btn-month-add]) .btn.add.add.year, :host([show-ctrl-btn-month-sub]) .btn.add.sub.year {\n  --bg-img: var(--icon-arrow-right-double);\n}\n\ndt-yyyymmdd-list-grp {\n  width: 100%;\n}\ndt-yyyymmdd-list-grp::part(list) {\n  scroll-behavior: smooth;\n}\ndt-yyyymmdd-list-grp::part(col label) {\n  display: none;\n}\n\ndt-popover {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.title-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  cursor: pointer;\n  margin: 10px 0;\n  min-height: 25px;\n  padding: 0 10px;\n  border-radius: 2px;\n  user-select: none;\n}\n.title-wrapper:hover {\n  background-color: var(--dt-bg-hover, #eee);\n}\n\n.title-arrow {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  position: relative;\n}\n.title-arrow::before {\n  content: '';\n  background-color: var(--dt-text-main, #333);\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  mask-repeat: no-repeat;\n  mask-position: center;\n  mask-image: ", ";\n  -webkit-mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  -webkit-mask-image: ", ";\n}\n\ndt-popover[open] .title-arrow {\n  transform: rotate(180deg);\n}\n"])), svg2cssUrl(arrowLeftSvg), svg2cssUrl(arrowLeftDoubleSvg), svg2cssUrl(arrowRightSvg), svg2cssUrl(arrowRightDoubleSvg), svg2cssUrl(arrowDownSvg), svg2cssUrl(arrowDownSvg));