import styled from "styled-components";
import { tokens, classes } from "./Sheet.tokens";
import { handleTransition } from "./utils/handleTransition";
export const StyledContentWrapper = styled.div.withConfig({
    displayName: "Sheet.styles__StyledContentWrapper",
    componentId: "sc-a7a4c3fe-0"
})([
    `position:fixed;left:0;bottom:0;width:100%;max-height:100%;z-index:1000;opacity:1;display:flex;flex-direction:column;justify-content:flex-end;transition:`,
    `;&.`,
    `{opacity:0;visibility:hidden;transform:translateY(100%);}`
], handleTransition('all 0.5s 0.1s'), String(classes.closed));
export const StyledSheetHandle = styled.div.withConfig({
    displayName: "Sheet.styles__StyledSheetHandle",
    componentId: "sc-a7a4c3fe-1"
})([
    `padding:1.75rem 0;width:100%;margin:var(`,
    `) 0;opacity:0.65;align-self:center;justify-content:center;display:flex;&::before{width:3rem;content:'';display:block;border-radius:0.625rem;background-color:var(`,
    `);height:0.25rem;}`
], tokens.handleMarginTop, tokens.handleBackgroundColor);
export const StyledSheetContent = styled.div.withConfig({
    displayName: "Sheet.styles__StyledSheetContent",
    componentId: "sc-a7a4c3fe-2"
})([
    `border-radius:1.25rem 1.25rem 0 0;background-color:var(`,
    `);padding-left:1rem;padding-right:1rem;padding-top:`,
    `;padding-bottom:`,
    `;max-height:100%;overflow:auto;overscroll-behavior:contain;&::-webkit-scrollbar{display:none;}`
], tokens.contentBackgroundColor, ({ hasHeader })=>hasHeader ? 'unset' : '1rem', ({ hasFooter })=>hasFooter ? 'unset' : '1rem');
export const StyledSheetHeader = styled.div.withConfig({
    displayName: "Sheet.styles__StyledSheetHeader",
    componentId: "sc-a7a4c3fe-3"
})([
    `width:100%;z-index:1;padding-top:1rem;position:`,
    `;top:`,
    `;background-color:`,
    `;`
], ({ isHeaderFixed })=>isHeaderFixed ? 'sticky' : 'static', ({ isHeaderFixed })=>isHeaderFixed ? '0' : 'unset', ({ isHeaderFixed })=>isHeaderFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent');
export const StyledSheetBody = styled.div.withConfig({
    displayName: "Sheet.styles__StyledSheetBody",
    componentId: "sc-a7a4c3fe-4"
})([
    ``
]);
export const StyledSheetFooter = styled.div.withConfig({
    displayName: "Sheet.styles__StyledSheetFooter",
    componentId: "sc-a7a4c3fe-5"
})([
    `width:100%;z-index:1;padding-bottom:1rem;position:`,
    `;bottom:`,
    `;background-color:`,
    `;`
], ({ isFooterFixed })=>isFooterFixed ? 'sticky' : 'static', ({ isFooterFixed })=>isFooterFixed ? '0' : 'unset', ({ isFooterFixed })=>isFooterFixed ? `var(${tokens.contentBackgroundColor})` : 'transparent');
