/**
 * Shared play button for <lite-youtube> and <lite-vimeo>.
 *
 * Not exported from the package — both components interpolate these string
 * constants into their shadow DOM at construction so the button looks and
 * behaves identically across the two.
 *
 * Styling API (set on the host element):
 *   --play-btn-fill   disc fill        (default rgb(0 0 0 / 0.68))
 *   --play-btn-ring   disc outline     (default rgb(255 255 255 / 0.2))
 *   --play-btn-icon   play triangle    (default #fff)
 *   --play-btn-size   button dimension (default 130px)
 *
 * Anything beyond those knobs goes through `::part(play-button)`.
 */
/** Button markup: a dark disc with a thin ring and a white play triangle. */
export declare const playButtonHtml = "\n        <button id=\"playButton\" part=\"play-button\" type=\"button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 134.657 134.657\" aria-hidden=\"true\" focusable=\"false\">\n            <circle class=\"disc\" cx=\"67.329\" cy=\"67.329\" r=\"66.829\" stroke-width=\"1\"/>\n            <path class=\"icon\" data-name=\"Play\" d=\"M57.572 80.797a1.509 1.509 0 0 1-.187-.79V54.733a1.489 1.489 0 0 1 .07-.45.479.479 0 0 1 .016-.049l.006-.016a1.592 1.592 0 0 1 .1-.215 1.5 1.5 0 0 1 2.012-.595l.035.02L82.337 66.09a1.5 1.5 0 0 1 0 2.62L59.62 81.375a1.488 1.488 0 0 1-.73.189 1.506 1.506 0 0 1-1.318-.767Z\"/>\n          </svg>\n        </button>";
/** Button styles, including positioning, focus ring, and forced-colors support. */
export declare const playButtonStyles = "\n        :host {\n          --play-btn-fill: rgb(0 0 0 / 0.68);\n          --play-btn-ring: rgb(255 255 255 / 0.2);\n          --play-btn-icon: #fff;\n          --play-btn-size: 130px;\n        }\n\n        #playButton {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate3d(-50%, -50%, 0);\n          width: var(--play-btn-size);\n          height: var(--play-btn-size);\n          padding: 0;\n          border: 0;\n          background: transparent;\n          z-index: 1;\n          cursor: inherit;\n          opacity: 0.8;\n          transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);\n        }\n\n        #frame:hover #playButton,\n        #playButton:focus-visible {\n          opacity: 1;\n        }\n\n        #playButton:focus-visible {\n          outline: 3px solid #fff;\n          outline-offset: 2px;\n          box-shadow: 0 0 0 6px rgb(0 0 0 / 0.8);\n          border-radius: 50%;\n        }\n\n        .disc {\n          fill: var(--play-btn-fill);\n          stroke: var(--play-btn-ring);\n        }\n\n        .icon {\n          fill: var(--play-btn-icon);\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          #playButton {\n            transition: none;\n          }\n        }\n\n        @media (forced-colors: active) {\n          .disc {\n            fill: Canvas;\n            stroke: ButtonText;\n          }\n          .icon {\n            fill: ButtonText;\n          }\n        }";
//# sourceMappingURL=play-button.d.ts.map