var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { Children } from 'react';
import { makeStyles } from '../../shared/makeStyles';
const useStyles = makeStyles()(() => ({
    'AspectRatio--outer': {
        height: 0,
        overflow: 'hidden',
        position: 'relative',
    },
    'AspectRatio--inner': {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        '& > *': {
            height: '100%',
        },
    },
}));
/**
 * this component is a little context sensitive, if it's rendered as a child of
 * a flex-container it'll need a way to figure out it's width (via explicity
 * setting a `width`, or by configuring it's `flex`/`flex-basis`) otherwise
 * it'll just collapse
 *
 * in `block` and `inline-block` contexts it should grow to fill the width of
 * it's parent and can be manipulated in the usual CSS ways (e.g. `max-width`
 * and `margin: 0 auto` or whatever)
 */
export const AspectRatio = (_a) => {
    var { ratio, children } = _a, props = __rest(_a, ["ratio", "children"]);
    const { classes } = useStyles();
    return (React.createElement("div", Object.assign({}, props),
        React.createElement("div", { className: classes['AspectRatio--outer'], style: { paddingTop: `${(1 / (ratio || 1)) * 100}%` } },
            React.createElement("div", { className: classes['AspectRatio--inner'] }, Children.only(children)))));
};
//# sourceMappingURL=AspectRatio.js.map