/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from "@front10/base-elements";
import { CenterOverlay } from "../_commons/atoms/CenterOverlay";

export function TwitterVideoPlayback() {
  return (
    <CenterOverlay>
      <div
        sx={{
          backgroundColor: "var(--color-primary)",
          height: 48,
          width: 48,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "50%",
          border: "solid 3px white",
        }}
      >
        <svg
          viewBox="0 0 24 24"
          width={32}
          height={32}
          sx={{ paddingLeft: "3px" }}
        >
          <g>
            <path
              fill="#fff"
              d="M20.436 11.37L5.904 2.116c-.23-.147-.523-.158-.762-.024-.24.132-.39.384-.39.657v18.5c0 .273.15.525.39.657.112.063.236.093.36.093.14 0 .28-.04.402-.117l14.53-9.248c.218-.138.35-.376.35-.633 0-.256-.132-.495-.348-.633z"
            />
          </g>
        </svg>
      </div>
    </CenterOverlay>
  );
}