import styled, { css } from "styled-components";
import { addFocus } from "../../mixins";
import { tokens } from "./Modal.tokens";
export const base = css([
    `height:100%;`
]);
export const ModalBody = styled.div.withConfig({
    displayName: "Modal.styles__ModalBody",
    componentId: "sc-5924a948-0"
})([
    `height:100%;box-sizing:border-box;border-radius:var(`,
    `);padding:var(`,
    `);background:var(`,
    `);box-shadow:var(--shadow-down-soft-l);`
], tokens.modalBodyBorderRadius, tokens.modalBodyPadding, tokens.modalBodyBackground);
export const ModalContent = styled.div.withConfig({
    displayName: "Modal.styles__ModalContent",
    componentId: "sc-5924a948-1"
})([
    `position:relative;padding:var(`,
    `);`
], tokens.modalContentPadding);
export const CloseButton = styled.button.withConfig({
    displayName: "Modal.styles__CloseButton",
    componentId: "sc-5924a948-2"
})([
    `top:0;right:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(`,
    `);padding:0;margin:0;outline:none;cursor:pointer;background:transparent;`,
    `;color:var(`,
    `);&:hover{color:var(`,
    `);}&:active{color:var(`,
    `);}position:absolute;`
], tokens.modalCloseButtonRadius, addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0.188rem',
    outlineColor: `var(${tokens.modalOutlineFocusColor})`,
    outlineRadius: `calc(var(${tokens.modalCloseButtonRadius}) - 0.063rem)`
}), tokens.modalCloseButtonColor, tokens.modalCloseButtonHoverColor, tokens.modalCloseButtonActiveColor);
