import styled, { css } from "styled-components";
import { classes, tokens } from "./Card.tokens";
export const CardContent = styled.div.withConfig({
    displayName: "Card.styles__CardContent",
    componentId: "sc-a6638d12-0"
})([
    `position:relative;display:flex;border-radius:var(`,
    `);overflow:hidden;aspect-ratio:`,
    `;flex-direction:`,
    `;`
], tokens.contentBorderRadius, ({ aspectRatio })=>aspectRatio ?? '', ({ orientation })=>orientation === 'vertical' ? 'column' : 'row');
export const CardInnerContent = styled.div.withConfig({
    displayName: "Card.styles__CardInnerContent",
    componentId: "sc-a6638d12-1"
})([
    `position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:`,
    `;`
], ({ orientation })=>orientation === 'vertical' ? 'column' : 'row');
export const base = css([
    `position:relative;display:inline-flex;box-sizing:border-box;z-index:0;&.`,
    `{position:relative;:after{content:'';display:block;position:absolute;inset:calc(-1 * var(--plasma-card-border-width));border:var(`,
    `) solid var(--outline-accent);border-radius:var(`,
    `);z-index:-1;}}:not(&.`,
    `){`,
    `{border-radius:var(`,
    `);}}&.`,
    `{padding:var(`,
    `);&.`,
    `{:after{inset:calc(-1 * var(`,
    `));}}}&.`,
    `{`,
    `{align-items:center;justify-content:center;}}&.`,
    `{`,
    `{align-items:center;justify-content:center;}flex-direction:column;}`
], classes.selected, tokens.borderWidth, tokens.borderRadius, classes.backgroundSolid, CardContent, tokens.borderRadius, classes.backgroundSolid, tokens.outlineWidth, classes.selected, tokens.borderWidth, classes.horizontal, CardContent, classes.vertical, CardContent);
