import{LitElement as t,html as e,css as r}from"lit";import{ResizeController as n}from"./controllers/resize-controller.js";const a=[570,860,1150];class i extends t{static get properties(){return{mode:{type:String,reflect:!0}}}constructor(){super(),this.mode=null,new n(this,{widthBreakpoints:a})}render(){return e` <slot></slot> `}static get styles(){return r`
      :host {
        /* stylelint-disable-next-line */
        /*
          We ask the user to specify this number (if > 1)
          because the information is known and detecting it automatically and properly requires a MutationObserver
          to count them in the \\\\\\\\\\\\\\\\\` < slot >\\\\\\\\\\\\\\\\\` and it seems overkill.
        */
        --cc-overview-head-count: 1;

        display: grid;
        grid-gap: 1em;
      }

      /* region GRID LAYOUT */

      :host([w-lt-570]) {
        grid-template-columns: [main-start] 1fr [main-end];
      }

      :host([w-gte-570][w-lt-860]) {
        grid-template-columns: [main-start] 1fr 1fr [main-end];
      }

      :host([w-gte-860][w-lt-1150]) {
        grid-template-columns: [main-start] 1fr 1fr [main-end] 1fr;
      }

      :host([w-gte-1150]) {
        grid-template-columns: [main-start] 1fr 1fr 1fr [main-end] 1fr;
      }

      /* endregion */

      /* region GRID LAYOUT (app) */

      :host([mode='app'][w-lt-570]) {
        grid-template-rows: repeat(calc(var(--cc-overview-head-count) + 6), min-content) [main-start] 1fr [main-end];
      }

      :host([mode='app'][w-gte-570][w-lt-860]) {
        grid-template-rows: repeat(calc(var(--cc-overview-head-count) + 3), min-content) [main-start] 1fr [main-end];
      }

      :host([mode='app'][w-gte-860][w-lt-1150]) {
        grid-template-rows:
          repeat(calc(var(--cc-overview-head-count) + 1), min-content)
          [main-start] min-content 1fr 1fr [main-end];
      }

      :host([mode='app'][w-gte-1150]) {
        grid-template-rows:
          repeat(calc(var(--cc-overview-head-count) + 1), min-content)
          [main-start] 1fr 1fr [main-end];
      }

      /* endregion */

      /* region GRID LAYOUT (orga) */

      :host([mode='orga'][w-lt-570]) {
        grid-template-rows: repeat(calc(var(--cc-overview-head-count) + 2), min-content) [main-start] 1fr [main-end];
      }

      :host([mode='orga'][w-gte-570][w-lt-860]) {
        grid-template-rows: repeat(calc(var(--cc-overview-head-count) + 1), min-content) [main-start] 1fr [main-end];
      }

      :host([mode='orga'][w-gte-860]) {
        grid-template-rows:
          repeat(calc(var(--cc-overview-head-count) + 0), min-content)
          [main-start] 1fr 1fr [main-end];
      }

      /* endregion */

      /* .head TILE POSITION/SIZE */

      ::slotted(*.head) {
        grid-column: 1 / -1;
      }

      /* .main TILE POSITION/SIZE */

      ::slotted(*.main) {
        grid-column: main-start / main-end;
        grid-row: main-start / main-end;
        height: auto;
        min-height: 25em;
        width: auto;
      }
    `}}window.customElements.define("cc-overview",i);export{i as CcOverview};
//# sourceMappingURL=cc-overview.js.map
