import styled from "styled-components";
import { mergeConfig, component } from "../../engines";
import { iconButtonConfig } from "../IconButton";
import { tokens as iconButtonTokens } from "../IconButton/IconButton.tokens";
import { tokens, classes } from "./BottomSheet.tokens";
const IconButton = component(mergeConfig(iconButtonConfig));
const dividerLine = `
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    height: var(${tokens.dividerWidth});
    background-color: var(${tokens.dividerColor});
    opacity: 0;
    transition: opacity 0.2s ease;
`;
export const Panel = styled.div.withConfig({
    displayName: "BottomSheet.styles__Panel",
    componentId: "sc-fd7cf603-0"
})([
    `position:fixed;left:0;bottom:0;width:100%;max-height:inherit;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(`,
    `);overflow:visible;&.`,
    `{transition:transform 0.4s ease,opacity 0.4s ease,height 0.3s ease,visibility 0.4s ease;}&.`,
    `{transform:translateY(100%);opacity:0;visibility:hidden;}`
], tokens.borderRadius, classes.animated, classes.closed);
export const PanelContent = styled.div.withConfig({
    displayName: "BottomSheet.styles__PanelContent",
    componentId: "sc-fd7cf603-1"
})([
    `display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-height:inherit;background-color:var(`,
    `);border-radius:inherit;overflow:hidden;`
], tokens.contentBackgroundColor);
export const Handler = styled.div.withConfig({
    displayName: "BottomSheet.styles__Handler",
    componentId: "sc-fd7cf603-2"
})([
    `position:absolute;z-index:1;top:`,
    `;left:0;right:0;display:flex;justify-content:center;box-sizing:border-box;padding:var(`,
    `) 0;touch-action:none;user-select:none;cursor:grab;&::before{content:'';display:none;width:var(`,
    `);height:var(`,
    `);border-radius:var(`,
    `);background-color:var(`,
    `);}&.`,
    `::before{display:block;}`
], ({ $placement })=>$placement === 'outer' ? `calc(-1 * (2 * var(${tokens.handleGap}) + var(${tokens.handleHeight})))` : '0', tokens.handleGap, tokens.handleWidth, tokens.handleHeight, tokens.handleBorderRadius, tokens.handleBackgroundColor, classes.hasHandle);
export const StyledBody = styled.div.withConfig({
    displayName: "BottomSheet.styles__StyledBody",
    componentId: "sc-fd7cf603-3"
})([
    `flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:none;&::-webkit-scrollbar{display:none;}`
]);
export const Header = styled.div.withConfig({
    displayName: "BottomSheet.styles__Header",
    componentId: "sc-fd7cf603-4"
})([
    `position:relative;flex-shrink:0;&::after{`,
    ` bottom:0;}&.`,
    `::after{opacity:1;}`
], dividerLine, classes.headerDividerVisible);
export const Footer = styled.div.withConfig({
    displayName: "BottomSheet.styles__Footer",
    componentId: "sc-fd7cf603-5"
})([
    `position:relative;flex-shrink:0;&::before{`,
    ` top:0;}&.`,
    `::before{opacity:1;}`
], dividerLine, classes.footerDividerVisible);
export const BeforeHeader = styled.div.withConfig({
    displayName: "BottomSheet.styles__BeforeHeader",
    componentId: "sc-fd7cf603-6"
})([
    `flex-shrink:0;`
]);
export const CloseButton = styled(IconButton).withConfig({
    displayName: "BottomSheet.styles__CloseButton",
    componentId: "sc-fd7cf603-7"
})([
    `position:absolute;z-index:2;top:var(`,
    `);right:var(`,
    `);flex-shrink:0;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], tokens.closeIconOffset, tokens.closeIconOffset, iconButtonTokens.iconButtonWidth, tokens.closeIconSize, iconButtonTokens.iconButtonHeight, tokens.closeIconSize, iconButtonTokens.iconButtonRadius, tokens.closeIconRadius, iconButtonTokens.iconButtonColor, tokens.closeIconColor, iconButtonTokens.iconButtonColorHover, tokens.closeIconColor, iconButtonTokens.iconButtonColorActive, tokens.closeIconColor, iconButtonTokens.iconButtonBackgroundColor, tokens.closeIconBackgroundColor, iconButtonTokens.iconButtonBackgroundColorHover, tokens.closeIconBackgroundColorHover);
