import{LitElement as t,html as e,css as o}from"lit";import{iconRemixArrowDownSLine as n}from"./assets/cc-remix.icons.js";import"./cc-icon.js";import{CcToggleEvent as r}from"./components/common.events.js";class i extends t{static get properties(){return{isOpen:{type:Boolean,reflect:!0,attribute:"is-open"}}}constructor(){super(),this.isOpen=!1}_onClickToggle(){this.isOpen=!this.isOpen,this.dispatchEvent(new r({isOpen:this.isOpen}))}render(){return e`
      <div class="wrapper">
        <button class="button" aria-expanded="${this.isOpen}" aria-controls="content" @click=${this._onClickToggle}>
          <slot name="button-text"></slot>
          <cc-icon .icon="${n}"></cc-icon>
        </button>
        <div id="content" class="content">
          <slot name="content"></slot>
        </div>
        <div class="links">
          <slot name="link"></slot>
        </div>
      </div>
    `}static get styles(){return[o`
        :host {
          container-type: inline-size;
          display: block;
        }

        .wrapper {
          align-items: center;
          display: grid;
          grid-template-areas: 'button links' 'content content';
          grid-template-columns: 1fr auto;
          justify-items: start;
        }

        @container (max-width: 34em) {
          .wrapper {
            grid-template-areas:
              'button'
              'content'
              'links';
            grid-template-columns: 1fr;
          }
        }

        .button {
          align-items: center;
          background-color: transparent;
          border: solid 1px transparent;
          display: flex;
          font-family: inherit;
          font-size: 1em;
          grid-area: button;
          padding: 0.25em 0.6em 0.35em;
          transition: all 0.3s;
        }

        :host([is-open]) .button {
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--cc-border-radius-default, 0.25em) var(--cc-border-radius-default, 0.25em) 0 0;
          margin-bottom: 0;
        }

        .button:hover {
          border: solid 1px var(--cc-color-border-neutral-strong, #8c8c8c);
          border-radius: var(--cc-border-radius-default, 0.25em);
        }

        .button cc-icon {
          margin-left: 0.1em;
          transition: all 0.3s;
        }

        :host([is-open]) .button cc-icon {
          transform: rotate(180deg);
        }

        :host(:not([is-open])) .button:hover cc-icon {
          transform: rotate(90deg);
        }

        .content {
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          display: none;
          grid-area: content;
          padding: 1em;
          width: 100%;
        }

        :host([is-open]) .content {
          border-top-left-radius: 0;
          display: block;
        }

        ::slotted([slot='content']) {
          display: flex;
          flex-direction: column;
        }

        .links {
          align-items: center;
          display: flex;
          gap: 0.5em;
          grid-area: links;
          justify-self: end;
        }

        @container (max-width: 34em) {
          .links {
            justify-self: unset;
            margin-block-start: 0.5em;
          }
        }

        ::slotted([slot='link']) {
          align-items: center;
          color: var(--cc-color-text-primary-highlight, blue);
          display: flex;
          flex-direction: row;
          gap: 0.5em;
        }
      `]}}window.customElements.define("cc-block-details",i);export{i as CcBlockDetails};
//# sourceMappingURL=cc-block-details.js.map
