import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { addFocus } from "../../mixins";
import { tokens } from "./Modal.tokens";
export const base = /*#__PURE__*/ css("height:100%;", "base");
export const ModalBody = /*#__PURE__*/ styled("div", {
    target: "e1hovuca0",
    label: "ModalBody"
})("height:100%;box-sizing:border-box;border-radius:var(", tokens.modalBodyBorderRadius, ");padding:var(", tokens.modalBodyPadding, ");background:var(", tokens.modalBodyBackground, ");box-shadow:var(--shadow-down-soft-l);");
export const ModalContent = /*#__PURE__*/ styled("div", {
    target: "e1hovuca1",
    label: "ModalContent"
})("position:relative;padding:var(", tokens.modalContentPadding, ");");
export const CloseButton = /*#__PURE__*/ styled("button", {
    target: "e1hovuca2",
    label: "CloseButton"
})("top:0;right:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(", tokens.modalCloseButtonRadius, ");padding:0;margin:0;outline:none;cursor:pointer;background:transparent;", addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.188rem',
    outlineColor: `var(${tokens.modalOutlineFocusColor})`,
    outlineRadius: `calc(var(${tokens.modalCloseButtonRadius}) - 0.063rem)`
}), ";color:var(", tokens.modalCloseButtonColor, ");&:hover{color:var(", tokens.modalCloseButtonHoverColor, ");}&:active{color:var(", tokens.modalCloseButtonActiveColor, ");}position:absolute;");
