@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
47 lines (43 loc) • 1.38 kB
JSX
"use client";
import { styled } from "styled-components";
import { Root } from "../../../lib/style";
import * as InnerContent from "../../../components/layouts/contents/inner/InnerContent.styled";
import * as Box from "../../../components/layouts/box/Box.styled";
const Style = styled.section `
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: ${({ $align }) => ($align === "left" ? "row" : "row-reverse")};
width: -webkit-fill-available;
height: -webkit-fill-available;
overflow: hidden auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
pointer-events: none;
z-index: 1000;
${InnerContent.default} {
max-width: ${({ $width }) => `calc(${$width}em - 6em)`};
padding: 3em;
gap: 2em;
height: max-content;
}
&[data-active="true"] ${Box.default} {
pointer-events: initial;
}
&[data-active="false"] ${Box.default} {
pointer-events: none;
}
@media all and (max-width: ${Root.Device.Mobile}px) {
& {
${InnerContent.default} {
max-width: calc(100% - 4em);
padding: 2em;
gap: 1em;
height: max-content;
}
}
}
`;
export default Style;
//# sourceMappingURL=Toast.styled.jsx.map