import styled, { css } from "styled-components";
import { tokens } from "./Popover.tokens";
export const base = css([
    `border-radius:var(`,
    `);`
], tokens.borderRadius);
export const Wrapper = styled.div.withConfig({
    displayName: "Popover.styles__Wrapper",
    componentId: "sc-8d92fd02-0"
})([
    `position:relative;background:var(`,
    `);padding:var(`,
    `);border-radius:var(`,
    `);box-shadow:var(`,
    `);width:100%;height:100%;box-sizing:border-box;`
], tokens.backgroundColor, tokens.padding, tokens.borderRadius, tokens.boxShadow);
export const CloseButton = styled.button.withConfig({
    displayName: "Popover.styles__CloseButton",
    componentId: "sc-8d92fd02-1"
})([
    `position:absolute;top:var(`,
    `);right:var(`,
    `);padding:0;margin:0;border:none;background:none;cursor:pointer;line-height:0;color:var(`,
    `);&:hover{color:var(`,
    `);}&:active{color:var(`,
    `);}`
], tokens.iconOffset, tokens.iconOffset, tokens.iconColor, tokens.iconColorHover, tokens.iconColorActive);
