import { GdsElement } from '../../gds-element';
declare const GdsVideo_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & typeof GdsElement;
/**
 * `gds-video` is a custom video element that provides configurable .mp4 video playback that can be used as background or hero video without controls.
 * The video can be customized with different properties like ratio, position, inset, width, height, opacity, fit, and radius.
 *
 * @element gds-video
 * @status beta
 *
 */
export declare class GdsVideo extends GdsVideo_base {
    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
    /**
     * Controls the aspect ratio of the image.
     * Supports all common aspect ratios like 16/9, 4/3, 1/1, etc.
     *
     * You can apply the aspect ratio like this:
     *
     * ```html
     * <gds-video aspect-ratio="16/9"></gds-video>
     * ```
     *
     * The above example will apply the aspect ratio of 16/9.
     *
     * You can also apply different aspect ratios for different screen sizes like this:
     *
     * ```html
     * <gds-video aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-video>
     * ```
     *
     *  The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens.
     *
     * @property ratio
     */
    'aspect-ratio'?: string;
    /**
     * Controls the `object-position` of the video.
     * Supports all common CSS values.
     * @property position
     */
    'object-position'?: string;
    /**
     * Controls the opacity property of the image.
     *
     * You can apply opacity like this:
     *
     * ```html
     * <gds-img opacity="0.2"></gds-img>
     * ```
     *
     * The above example will apply the opacity style of 0.2.
     * This is useful when you want to apply a transparent effect to the image when having a darkened background to increase the readability of the text.
     * @property opacity
     */
    opacity?: string;
    /**
     * Controls the object-fit property of the image.
     *
     * You can apply fit like this:
     *
     * ```html
     * <gds-img object-fit="cover"></gds-img>
     * ```
     *
     *  The above example will apply the object-fit style of cover.
     *
     * @property fit
     */
    'object-fit'?: string;
    /**
     * Controls the pointer-events property of the video.
     * Supports all valid CSS pointer-events values.
     *
     * @property events
     */
    'pointer-events'?: string;
    /**
     * Controls the border-radius property of the video.
     * Supports all the size tokens from the design system.
     *
     * @example
     * You can apply radius in each corner like this:
     *
     * ```html
     * <gds-div border-radius="none none m m" ></gds-div>
     * ```
     *
     * Also for different breakpoints like this:
     *
     * ```html
     * <gds-div border-radius="s{none none xs} m{none xs none xs} l{s}" ></gds-div>
     * ```
     *
     * Each corner can have a different radius value and also different values for different breakpoints.
     * @property radius
     */
    'border-radius'?: string;
    src?: string;
    poster?: string;
    muted?: boolean;
    playsinline?: boolean;
    autoplay?: boolean;
    loop?: boolean;
    videoElement: HTMLVideoElement;
    applyVideoSettings(): void;
    render(): any;
    firstUpdated(): void;
}
export {};