/* styled.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./styled.compiled.css";
import { forwardRef } from 'react';
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @atlaskit/ui-styling-standard/no-dynamic-styles */

import { N30 } from '@atlaskit/theme/colors';
export const className = 'media-card-frame';
export const embedHeaderHeight = 32;
const getSizeWithUnit = (value = '100%') => {
  const unit = typeof value === 'number' ? 'px' : '';
  return `${value}${unit}`;
};

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
export const Image = forwardRef(({
  as: C = "img",
  style: __cmpls,
  ...__cmplp
}, __cmplr) => {
  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
    style: {
      ...__cmpls,
      "--_rcxkve": ix(getSizeWithUnit(__cmplp.size))
    },
    ref: __cmplr,
    className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb17ym _4t3i17ym", __cmplp.className])
  }));
});

// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
if (process.env.NODE_ENV !== 'production') {
  Image.displayName = 'Image';
}
export const Thumbnail = forwardRef(({
  as: C = "div",
  style: __cmpls,
  ...__cmplp
}, __cmplr) => {
  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
    style: {
      ...__cmpls,
      "--_13orr8u": ix(`url(${__cmplp.src})`)
    },
    ref: __cmplr,
    className: ax(["_2rkofajl _1bsbckbl _4t3ickbl _1aaxusic _19pk1b66 _2hwxidpf _otyrutpp _18u0utpp _bfhkqrzy _1lrw1dfr _1itk2pcs", __cmplp.className])
  }));
});
if (process.env.NODE_ENV !== 'production') {
  Thumbnail.displayName = 'Thumbnail';
}