import styled from "styled-components";
import { iconButtonConfig, iconButtonTokens } from "../../../IconButton";
import { component, mergeConfig } from "../../../../engines";
import { tokens } from "./Card.tokens";
const mergedConfig = mergeConfig(iconButtonConfig);
export const IconButton = component(mergedConfig);
const WIDTH_VERTICAL = 302;
const WIDTH_HORIZONTAL = 720;
export const TourCard = styled.div.withConfig({
    displayName: "Card.styles__TourCard",
    componentId: "sc-c58c832a-0"
})([
    `position:relative;display:flex;flex-direction:`,
    `;padding:var(`,
    `);background:var(`,
    `);border-radius:var(`,
    `);box-sizing:border-box;width:`,
    `px;height:`,
    `;max-height:`,
    `px;gap:`,
    `;`
], ({ orientation })=>orientation === 'horizontal' ? 'row-reverse' : 'column', tokens.padding, tokens.background, tokens.borderRadius, ({ orientation })=>orientation === 'horizontal' ? WIDTH_HORIZONTAL : WIDTH_VERTICAL, ({ orientation })=>orientation === 'horizontal' ? `${WIDTH_VERTICAL}px` : 'auto', ({ orientation })=>orientation === 'horizontal' ? WIDTH_VERTICAL : WIDTH_HORIZONTAL, ({ orientation })=>orientation === 'horizontal' ? `var(${tokens.gap})` : '0');
export const CardBody = styled.div.withConfig({
    displayName: "Card.styles__CardBody",
    componentId: "sc-c58c832a-1"
})([
    `display:flex;flex-direction:column;flex:1;`
]);
export const Img = styled.img.withConfig({
    displayName: "Card.styles__Img",
    componentId: "sc-c58c832a-2"
})([
    `width:`,
    `;height:`,
    `;border-radius:calc(var(`,
    `) - var(`,
    `));`
], ({ orientation })=>orientation === 'horizontal' ? 'auto' : '100%', ({ orientation })=>orientation === 'horizontal' ? '100%' : 'auto', tokens.borderRadius, tokens.padding);
export const CardText = styled.div.withConfig({
    displayName: "Card.styles__CardText",
    componentId: "sc-c58c832a-3"
})([
    `display:flex;flex-direction:column;flex:1;padding:var(`,
    `);padding:`,
    `;gap:var(`,
    `);`
], tokens.textPadding, ({ onlyText })=>onlyText ? `var(${tokens.textPaddingExtra})` : `var(${tokens.textPadding})`, tokens.textGap);
export const Title = styled.span.withConfig({
    displayName: "Card.styles__Title",
    componentId: "sc-c58c832a-4"
})([
    `color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);font-weight:var(`,
    `);`
], tokens.titleColor, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontLetterSpacing, tokens.titleFontLineHeight, tokens.titleFontWeight);
export const Description = styled.span.withConfig({
    displayName: "Card.styles__Description",
    componentId: "sc-c58c832a-5"
})([
    `color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);line-height:var(`,
    `);font-weight:var(`,
    `);`
], tokens.descriptionColor, tokens.descriptionFontFamily, tokens.descriptionFontSize, tokens.descriptionFontStyle, tokens.descriptionFontLineHeight, tokens.descriptionFontWeight);
export const Controls = styled.div.withConfig({
    displayName: "Card.styles__Controls",
    componentId: "sc-c58c832a-6"
})([
    `display:flex;flex-direction:`,
    `;align-items:`,
    `;justify-content:`,
    `;`
], ({ orientation })=>orientation === 'horizontal' ? 'row' : 'column', ({ orientation })=>orientation === 'horizontal' ? 'center' : 'stretch', ({ orientation })=>orientation === 'horizontal' ? 'space-between' : 'normal');
export const DotsContainer = styled.ul.withConfig({
    displayName: "Card.styles__DotsContainer",
    componentId: "sc-c58c832a-7"
})([
    `display:flex;align-items:center;justify-content:center;margin:`,
    `;padding:0;list-style:none;gap:var(`,
    `);`
], ({ orientation })=>orientation === 'horizontal' ? '0 0 0 8px' : `var(${tokens.dotContainerMargin})`, tokens.dotsGap);
export const Dot = styled.li.withConfig({
    displayName: "Card.styles__Dot",
    componentId: "sc-c58c832a-8"
})([
    `width:var(`,
    `);height:var(`,
    `);cursor:pointer;border-radius:50%;background:`,
    `;transition:background 0.3s ease-in-out;&:hover{background:`,
    `;}&:active{background:`,
    `;}`
], tokens.dotSize, tokens.dotSize, ({ isActive })=>isActive ? `var(${tokens.dotActiveBackground})` : `var(${tokens.dotBackground})`, ({ isActive })=>isActive ? `var(${tokens.dotActiveBackgroundHover},var(${tokens.dotActiveBackground}))` : `var(${tokens.dotBackgroundHover})`, ({ isActive })=>isActive ? `var(${tokens.dotActiveBackgroundActive}, var(${tokens.dotActiveBackground}))` : `var(${tokens.dotBackgroundActive})`);
export const ActionButtonsContainer = styled.div.withConfig({
    displayName: "Card.styles__ActionButtonsContainer",
    componentId: "sc-c58c832a-9"
})([
    `margin:`,
    `;order:`,
    `;`
], ({ orientation })=>orientation === 'horizontal' ? '0' : `var(${tokens.actionButtonsMargin})`, ({ orientation })=>orientation === 'horizontal' ? '-1' : 'auto');
export const SkipButtonContainer = styled.div.withConfig({
    displayName: "Card.styles__SkipButtonContainer",
    componentId: "sc-c58c832a-10"
})([
    `display:flex;justify-content:center;margin:`,
    `;`
], ({ orientation })=>orientation === 'horizontal' ? '0 0 0 8px' : `var(${tokens.skipButtonMargin})`);
export const CloseButton = styled(IconButton).withConfig({
    displayName: "Card.styles__CloseButton",
    componentId: "sc-c58c832a-11"
})([
    `position:absolute;top:1rem;right:1rem;`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], iconButtonTokens.iconButtonColor, tokens.closeButtonColor, iconButtonTokens.iconButtonBackgroundColor, tokens.closeButtonBackgroundColor, iconButtonTokens.iconButtonColorHover, tokens.closeButtonColorHover, iconButtonTokens.iconButtonColorActive, tokens.closeButtonColorActive, iconButtonTokens.iconButtonHeight, tokens.closeButtonWidth, iconButtonTokens.iconButtonWidth, tokens.closeButtonHeight, iconButtonTokens.iconButtonRadius, tokens.closeButtonRadius, iconButtonTokens.iconButtonFocusColor, tokens.closeButtonFocusColor);
