import "../../../vaadin-material-styles/font-icons.js";
import "../../../vaadin-material-styles/color.js";
import './vaadin-tab.js';
import { html } from "../../../../@polymer/polymer/lib/utils/html-tag.js";
const $_documentContainer = html`<dom-module id="material-tabs" theme-for="vaadin-tabs">
  <template>
    <style>
      :host {
        -webkit-tap-highlight-color: transparent;
      }

      :host {
        display: flex;
        flex-shrink: 0;
      }

      /* Hide scroll buttons when no needed, and on touch devices */

      :host(:not([overflow])) [part="forward-button"],
      :host(:not([overflow])) [part="back-button"] {
        display: none;
      }

      @media (pointer: coarse) {
        [part="back-button"],
        [part="forward-button"] {
          display: none !important;
        }
      }

      [part="forward-button"],
      [part="back-button"] {
        font-family: material-icons;
        color: var(--material-secondary-text-color);
        font-size: 24px;
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 100%;
        transition: 0.2s opacity;
        top: 0;
      }

      [part="forward-button"]:hover,
      [part="back-button"]:hover {
        color: inherit;
      }

      [part="forward-button"] {
        right: 0;
      }

      [part="forward-button"]::after {
        content: var(--material-icons-chevron-right);
      }

      [part="back-button"]::after {
        content: var(--material-icons-chevron-left);
      }

      :host([overflow]) [part="tabs"]::after {
        content: "";
        display: flex;
        flex-shrink: 0;
        width: 32px;
      }

      /* Fixed width tabs */
      :host([theme~="fixed"]) [part="tabs"] ::slotted(vaadin-tab) {
        flex-basis: 0.0001px;
      }
    </style>
  </template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);