import "../../../vaadin-lumo-styles/color.js";
import "../../../vaadin-lumo-styles/font-icons.js";
import "../../../vaadin-lumo-styles/sizing.js";
import "../../../vaadin-lumo-styles/spacing.js";
import "../../../vaadin-lumo-styles/style.js";
import "../../../vaadin-lumo-styles/typography.js";
import { html } from "../../../../@polymer/polymer/lib/utils/html-tag.js";
const $_documentContainer = html`<dom-module id="lumo-details" theme-for="vaadin-details">
  <template>
    <style>
      :host {
        margin: var(--lumo-space-xs) 0;
        outline: none;
      }

      [part="summary"] {
        display: flex;
        align-items: center;
        width: 100%;
        outline: none;
        padding: var(--lumo-space-s) 0;
        box-sizing: border-box;
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-m);
        font-weight: 500;
        line-height: var(--lumo-line-height-xs);
        color: var(--lumo-secondary-text-color);
        background-color: inherit;
        border-radius: var(--lumo-border-radius-m);
        cursor: default;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      :host([focus-ring]) [part="summary"] {
        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
      }

      [part="toggle"] {
        display: block;
        width: 1em;
        height: 1em;
        margin-left: calc(var(--lumo-space-xs) * -1);
        margin-right: var(--lumo-space-xs);
        font-size: var(--lumo-icon-size-s);
        line-height: 1;
        color: var(--lumo-contrast-60pct);
        font-family: "lumo-icons";
      }

      :host([disabled]) [part="summary"],
      :host([disabled]) [part="toggle"] {
        color: var(--lumo-disabled-text-color);
      }

      @media (hover: hover) {
        :host(:not([disabled])) [part="summary"]:hover,
        :host(:not([disabled])) [part="summary"]:hover [part="toggle"] {
          color: var(--lumo-contrast-80pct);
        }
      }

      [part="toggle"]::before {
        content: var(--lumo-icons-angle-right);
      }

      :host([opened]) [part="toggle"] {
        transform: rotate(90deg);
      }

      [part="content"] {
        padding: var(--lumo-space-xs) 0 var(--lumo-space-s);
        font-size: var(--lumo-font-size-m);
        line-height: var(--lumo-line-height-m);
      }

      :host([theme~="filled"]) {
        background-color: var(--lumo-contrast-5pct);
        border-radius: var(--lumo-border-radius-m);
      }

      :host([theme~="filled"]) [part="summary"] {
        padding: var(--lumo-space-s) calc(var(--lumo-space-s) + var(--lumo-space-xs) / 2);
      }

      :host([theme~="filled"]) [part="content"] {
        padding-left: var(--lumo-space-m);
        padding-right: var(--lumo-space-m);
      }

      :host([theme~="small"]) [part="summary"] {
        padding-top: var(--lumo-space-xs);
        padding-bottom: var(--lumo-space-xs);
      }

      :host([theme~="small"]) [part="toggle"] {
        margin-right: calc(var(--lumo-space-xs) / 2);
      }

      :host([theme~="small"]) [part\$="content"] {
        font-size: var(--lumo-font-size-s);
      }

      :host([theme~="reverse"]) [part="summary"] {
        justify-content: space-between;
      }

      :host([theme~="reverse"]) [part="toggle"] {
        order: 1;
        margin-right: 0;
      }

      :host([theme~="reverse"][theme~="filled"]) [part="summary"] {
        padding-left: var(--lumo-space-m);
      }

      /* RTL specific styles */

      :host([dir="rtl"]) [part="toggle"] {
        margin-left: var(--lumo-space-xs);
        margin-right: calc(var(--lumo-space-xs) * -1);
      }

      :host([dir="rtl"]) [part="toggle"]::before {
        content: var(--lumo-icons-angle-left);
      }

      :host([opened][dir="rtl"]) [part="toggle"] {
        transform: rotate(-90deg);
      }

      :host([theme~="small"][dir="rtl"]) [part="toggle"] {
        margin-left: calc(var(--lumo-space-xs) / 2);
      }

      :host([theme~="reverse"][dir="rtl"]) [part="toggle"] {
        margin-left: 0;
      }

      :host([theme~="reverse"][theme~="filled"][dir="rtl"]) [part="summary"] {
        padding-right: var(--lumo-space-m);
      }

    </style>
  </template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);