TypeScript styleHelpers.paddings函数代码示例

export const navLinksClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = navLinksVariables();
    const style = styleFactory("navLinks");
    const mediaQueries = vars.mediaQueries();

    const root = style(
        {
            ...paddings(vars.spacing.paddings),
            display: "flex",
            flexDirection: "column",
            maxWidth: percent(100),
            width: percent(100 / vars.columns.desktop),
        },
        mediaQueries.oneColumn({
            width: percent(100),
            ...paddings(vars.spacing.mobile.paddings),
        }),
    );

    const items = style("items", {
        display: "flex",
        flexDirection: "column",
        flexGrow: 1,
    });

    const item = style("item", {
        display: "block",
        fontSize: unit(vars.item.fontSize),
        marginTop: unit(vars.spacing.margin),
        marginBottom: unit(vars.spacing.margin),
    });

    const title = style(
        "title",
        {
            display: "block",
            fontSize: unit(vars.title.fontSize),
            lineHeight: globalVars.lineHeights.condensed,
            fontWeight: globalVars.fonts.weights.semiBold,
            maxWidth: percent(100),
            ...margins(vars.title.margins),
        },
        mediaQueries.oneColumn({
            fontSize: unit(vars.title.mobile.fontSize),
            fontWeight: vars.title.mobile.fontWeight,
        }),
    );

    const linkColors = setAllLinkColors({
        default: globalVars.mainColors.fg,
    });

    const link = style("link", {
        display: "block",
        fontSize: unit(vars.link.fontSize),
        lineHeight: vars.link.lineHeight,
        color: linkColors.color,
        $nest: linkColors.nested,
    });

    const viewAllitem = style(
        "viewAllItem",
        {
            display: "block",
            fontSize: unit(vars.item.fontSize),
            ...margins(vars.viewAll.margins),
            ...paddings(vars.viewAll.paddings),
        },
        mediaQueries.oneColumn({
            ...paddings(vars.viewAll.mobile.paddings),
        }),
    );

    const viewAllLinkColors = setAllLinkColors({
        default: globalVars.mainColors.primary,
    });

    const viewAll = style("viewAll", {
        display: "block",
        fontWeight: vars.viewAll.fontWeight,
        fontSize: vars.viewAll.fontSize,
        color: viewAllLinkColors.color,
        $nest: viewAllLinkColors.nested,
    });

    const linksWithHeadings = style(
        "linksWithHeadings",
        {
            ...paddings(vars.linksWithHeadings.paddings),
            display: "flex",
            flexWrap: "wrap",
            alignItems: "stretch",
            justifyContent: "space-between",
        },
        mediaQueries.oneColumn({
            ...paddings(vars.linksWithHeadings.mobile.paddings),
        }),
    );

//.........这里部分代码省略.........

export default function titleBarNavClasses() {
    const globalVars = globalVariables();
    const titleBarVars = titleBarVariables();
    const vars = titleBarNavigationVariables();
    const mediaQueries = layoutVariables().mediaQueries();
    const flex = flexHelper();
    const style = styleFactory("titleBarNav");

    const root = style(
        {
            ...flex.middleLeft(),
            position: "relative",
            height: unit(titleBarVars.sizing.height),
        },
        mediaQueries.oneColumnDown({
            height: unit(titleBarVars.sizing.mobile.height),
        }),
    );

    const navigation = style("navigation", {});

    const items = style(
        "items",
        {
            ...flex.middleLeft(),
            height: unit(titleBarVars.sizing.height),
            ...paddings(vars.padding),
        },
        mediaQueries.oneColumnDown({
            height: px(titleBarVars.sizing.mobile.height),
            justifyContent: "center",
            width: percent(100),
        }),
    );

    const link = style("link", {
        ...userSelect(),
        color: colorOut(titleBarVars.colors.fg),
        whiteSpace: "nowrap",
        lineHeight: globalVars.lineHeights.condensed,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: unit(vars.item.size),
        textDecoration: "none",
        $nest: {
            "&.focus-visible": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
            "&:focus": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
            "&:hover": {
                backgroundColor: colorOut(titleBarVars.buttonContents.state.bg),
            },
        },
    });

    const linkActive = style("linkActive", {
        $nest: {
            "&:after": {
                ...absolutePosition.topLeft(
                    `calc(50% - ${unit(vars.linkActive.height + vars.linkActive.bottomSpace)})`,
                ),
                content: quote(""),
                height: unit(vars.linkActive.height),
                marginLeft: unit(negative(vars.linkActive.offset)),
                width: calc(`100% + ${unit(vars.linkActive.offset * 2)}`),
                backgroundColor: colorOut(vars.linkActive.bg),
                transform: `translateY(${unit(titleBarVars.sizing.height / 2)})`,
            },
        },
    });

    const linkContent = style("linkContent", {
        position: "relative",
    });

    const firstItem = style("lastItem", {
        zIndex: 2,
    });

    const lastItem = style("lastItem", {
        zIndex: 2,
    });

    return {
        root,
        navigation,
        items,
        link,
        linkActive,
        linkContent,
        lastItem,
        firstItem,
    };
}

export const searchResultClasses = useThemeCache(() => {
    const vars = searchResultsVariables();
    const globalVars = globalVariables();
    const style = styleFactory("searchResults");
    const mediaQueries = vars.mediaQueries();
    const metaVars = metasVariables();

    const title = style("title", {
        display: "block",
        ...fonts({
            color: vars.title.fg,
            size: globalVars.fonts.size.large,
            weight: globalVars.fonts.weights.semiBold,
        }),
        overflow: "hidden",
        flexGrow: 1,
        margin: 0,
        paddingRight: unit(24),
    });

    const root = style(
        {
            display: "flex",
            alignItems: "stretch",
            justifyContent: "space-between",
            ...paddings(vars.spacing.padding),
            cursor: "pointer",
            color: colorOut(vars.title.fg),
            borderBottom: singleBorder({
                color: vars.separator.fg,
                width: vars.separator.width,
            }) as any,
            $nest: {
                [`&:hover .${title}`]: {
                    color: colorOut(vars.colors.hover.fg),
                },
                [`&:focus .${title}`]: {
                    color: colorOut(vars.colors.hover.fg),
                },
                [`&:active .${title}`]: {
                    color: colorOut(vars.colors.hover.fg),
                },
                "&:not(.focus-visible)": {
                    outline: 0,
                },
            },
        },
        mediaQueries.compact({
            flexWrap: "wrap",
        }),
    );

    const main = style(
        "main",
        {
            display: "block",
            width: percent(100),
            $nest: {
                "&.hasMedia": {
                    width: calc(`100% - ${unit(vars.mediaElement.width + vars.spacing.padding.left)}`),
                },
            },
        },
        mediaQueries.compact({
            $nest: {
                "&.hasMedia": {
                    width: percent(100),
                },
            },
        }),
    );

    const mediaElement = style(
        "mediaElement",
        {
            position: "relative",
            width: unit(vars.mediaElement.width),
        },
        mediaQueries.compact({
            width: percent(100),
            $nest: {
                "&.hasImage": {
                    height: unit(vars.mediaElement.width),
                },
            },
        }),
    );

    const image = style("image", {
        ...objectFitWithFallback(),
    });

    const attachments = style(
        "attachments",
        {
            display: "flex",
            flexWrap: "nowrap",
        },
        mediaQueries.compact({
            flexWrap: "wrap",
//.........这里部分代码省略.........

export const radioTabClasses = useThemeCache(() => {
    const vars = radioTabsVariables();
    const style = styleFactory("radioTab");
    const mediaQueries = layoutVariables().mediaQueries();
    const formElementVariables = formElementsVariables();

    const root = style({
        display: "block",
    });

    const tabs = style("tabs", {
        display: "flex",
        position: "relative",
        flexWrap: "wrap",
        alignItems: "center",
        justifyContent: "center",
    });

    const tab = style(
        "tab",
        {
            ...userSelect(),
            position: "relative",
            display: "inline-block",
            flexGrow: 1,
            $nest: {
                "& + &": {
                    marginLeft: unit(negative(vars.border.width)),
                },
                "&:hover, &:focus, &:active": {
                    color: colorOut(vars.colors.state.fg),
                },
            },
        },
        mediaQueries.oneColumnDown({
            flexGrow: 0,
            $nest: {
                label: {
                    minHeight: unit(formElementVariables.sizing.height),
                    lineHeight: unit(formElementVariables.sizing.height),
                },
            },
        }),
    );

    const leftTab = style("leftTab", borderRadii(vars.leftTab.radii));
    const rightTab = style("rightTab", borderRadii(vars.rightTab.radii));

    const label = style("label", {
        ...userSelect(),
        display: "inline-block",
        position: "relative",
        cursor: "pointer",
        textAlign: "center",
        width: percent(100),
        minHeight: unit(vars.sizing.height),
        minWidth: unit(vars.sizing.minWidth),
        backgroundColor: colorOut(vars.colors.bg),
        ...fonts(vars.font),
        ...paddings(vars.spacing.paddings),
        borderColor: colorOut(vars.border.color),
        borderWidth: unit(vars.border.width),
        borderStyle: vars.border.style,
    });

    const input = style("input", {
        ...srOnly(),
        $nest: {
            "&:hover, &:focus + .radioButtonsAsTabs-label": {
                borderColor: colorOut(vars.border.active.color),
                zIndex: 1,
                color: colorOut(vars.colors.state.fg),
            },
            "&:checked": {
                $nest: {
                    "& + .radioButtonsAsTabs-label": {
                        backgroundColor: colorOut(vars.colors.selected.bg),
                    },
                    "&:hover, &:focus": {
                        color: colorOut(vars.colors.state.fg),
                    },
                },
            },
        },
    });

    return {
        root,
        tabs,
        tab,
        label,
        input,
        leftTab,
        rightTab,
    };
});

export const panelLayoutClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = layoutVariables();
    const mediaQueries = vars.mediaQueries();
    const style = styleFactory("panelLayout");
    const classesPanelArea = panelAreaClasses();
    const classesPanelList = panelListClasses();
    const titleBarVars = titleBarVariables();

    const main = style("main", {
        minHeight: viewHeight(20),
        width: percent(100),
    });

    const root = style({
        ...margins(vars.panelLayoutSpacing.margin),
        width: percent(100),
        $nest: {
            [`&.noBreadcrumbs > .${main}`]: {
                paddingTop: unit(globalVars.gutter.size),
                ...mediaQueries.oneColumnDown({
                    paddingTop: 0,
                }),
            },
            "&.isOneCol": {
                width: unit(vars.middleColumn.paddedWidth),
                maxWidth: percent(100),
                margin: "auto",
                ...mediaQueries.oneColumnDown({
                    width: percent(100),
                }),
            },
            "&.hasTopPadding": {
                paddingTop: unit(vars.panelLayoutSpacing.extraPadding.top),
            },
            "&.hasTopPadding.noBreadcrumbs": {
                paddingTop: unit(vars.panelLayoutSpacing.extraPadding.noBreadcrumbs.top),
            },
            "&.hasLargePadding": {
                ...paddings(vars.panelLayoutSpacing.largePadding),
            },
        },
    });

    const content = style("content", {
        display: "flex",
        flexGrow: 1,
        width: percent(100),
        justifyContent: "space-between",
    });

    const panel = style("panel", {
        width: percent(100),
        $nest: {
            [`& > .${classesPanelArea.root}:first-child .${classesPanelList.root}`]: {
                marginTop: unit(
                    (globalVars.fonts.size.title * globalVars.lineHeights.condensed) / 2 -
                        globalVariables().fonts.size.medium / 2,
                ),
            },
        },
    });

    const top = style("top", {
        width: percent(100),
        marginBottom: unit(globalVars.gutter.half),
    });

    const container = style("container", {
        display: "flex",
        flexWrap: "nowrap",
        alignItems: "flex-start",
        justifyContent: "space-between",
    });

    const fullWidth = style("fullWidth", {
        position: "relative",
        padding: 0,
    });

    const leftColumn = style("leftColumn", {
        position: "relative",
        width: unit(vars.panel.paddedWidth),
        flexBasis: unit(vars.panel.paddedWidth),
        minWidth: unit(vars.panel.paddedWidth),
    });

    const rightColumn = style("rightColumn", {
        position: "relative",
        width: unit(vars.panel.paddedWidth),
        flexBasis: unit(vars.panel.paddedWidth),
        minWidth: unit(vars.panel.paddedWidth),
        overflow: "initial",
    });

    const middleColumn = style("middleColumn", {
        justifyContent: "space-between",
        flexGrow: 1,
        width: percent(100),
        maxWidth: percent(100),
//.........这里部分代码省略.........

export const subcommunityTileClasses = useThemeCache(() => {
    const vars = subcommunityTileVariables();
    const globalVars = globalVariables();
    const debug = debugHelper("subcommunityTile");
    const shadow = shadowHelper();

    const root = style({
        display: "flex",
        flexDirection: "column",
        alignItems: "stretch",
        width: percent(100),
        padding: unit(vars.spacing.default),
        ...userSelect(),
        flexGrow: 1,
        ...debug.name(),
    });

    const link = style({
        ...defaultTransition("box-shadow", "border"),
        ...paddings(vars.link.padding),
        display: "block",
        position: "relative",
        cursor: "pointer",
        flexGrow: 1,
        color: vars.link.fg.toString(),
        backgroundColor: colorOut(vars.link.bg),
        borderRadius: unit(2),
        minHeight: unit(vars.link.minHeight),
        ...shadowOrBorderBasedOnLightness(
            globalVars.body.backgroundImage.color,
            borders({
                color: vars.link.fg.fade(0.3),
            }),
            shadow.embed(),
        ),
        $nest: {
            "&:hover": {
                ...shadowOrBorderBasedOnLightness(
                    globalVars.body.backgroundImage.color,
                    borders({
                        color: vars.link.fg.fade(0.5),
                    }),
                    shadow.embedHover(),
                ),
            },
        },
        ...debug.name("link"),
    });

    const main = style({
        position: "relative",
        ...debug.name("main"),
    });

    const frame = style({
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        height: unit(vars.frame.height),
        width: unit(vars.frame.width),
        marginTop: "auto",
        marginRight: "auto",
        marginLeft: "auto",
        marginBottom: unit(vars.frame.bottomMargin),
        ...debug.name("iconFrame"),
    });

    const icon = style({
        display: "block",
        position: "absolute",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        margin: "auto",
        height: "auto",
        maxWidth: percent(100),
        maxHeight: percent(100),
        ...debug.name("icon"),
    });

    const title = style({
        fontSize: unit(vars.title.fontSize),
        lineHeight: vars.title.lineHeight,
        textAlign: "center",
        marginBottom: unit(vars.title.marginBottom),
        ...debug.name("title"),
    });

    const description = style({
        position: "relative",
        marginTop: unit(vars.description.marginTop),
        fontSize: unit(vars.description.fontSize),
        lineHeight: vars.description.lineHeight,
        textAlign: "center",
        ...debug.name("description"),
    });

    const fallBackIcon = style({
//.........这里部分代码省略.........

export const splashStyles = useThemeCache(() => {
    const vars = splashVariables();
    const style = styleFactory("splash");
    const formElementVars = formElementsVariables();
    const globalVars = globalVariables();

    const root = style({
        position: "relative",
        backgroundColor: colorOut(vars.outerBackground.color),
    });

    const image = getBackgroundImage(vars.outerBackground.image, vars.outerBackground.fallbackImage);
    const outerBackground = (url?: string) => {
        return style("outerBackground", {
            ...centeredBackgroundProps(),
            display: "block",
            position: "absolute",
            top: px(0),
            left: px(0),
            width: percent(100),
            height: percent(100),
            ...background(url ? { ...vars.outerBackground, image: url } : vars.outerBackground),
            opacity:
                !url && (vars.outerBackground.fallbackImage && image === vars.outerBackground.fallbackImage)
                    ? 0.4
                    : undefined,
        });
    };

    const innerContainer = style("innerContainer", {
        ...paddings(vars.spacing.padding),
        backgroundColor: vars.innerBackground.bg,
    });

    const title = style("title", {
        display: "block",
        ...fonts(vars.title.font as IFont),
        ...paddings({
            top: unit(vars.title.marginTop),
            bottom: unit(vars.title.marginBottom),
        }),
        flexGrow: 1,
    });

    const text = style("text", {
        color: colorOut(vars.colors.contrast),
    });

    const searchButton = generateButtonClass(vars.searchButtonType, "splashSearchButton");

    const valueContainer = style("valueContainer", {
        $nest: {
            [`&, &.${searchBarClasses().valueContainer}`]: {
                ...borders({
                    color: vars.colors.contrast,
                    radius: {
                        right: 0,
                        left: vars.searchBar.border.radius,
                    },
                }),
            },
        },
    });

    const buttonOverwrite = style("buttonOverwrite", {
        color: vars.colors.input,
        $nest: {
            [`&, &.${searchBarClasses().actionButton}`]: {
                ...borders({
                    left: {
                        color: vars.searchBar.border.leftColor,
                    },
                    radius: {
                        right: vars.searchButton.borderRadius,
                        left: 0,
                    },
                }),
            },
        },
    } as any);

    const searchContainer = style("searchContainer", {
        position: "relative",
        maxWidth: percent(100),
        width: px(vars.searchContainer.width),
        margin: "auto",
        $nest: {
            ".search-results": {
                maxWidth: percent(100),
                width: px(vars.searchContainer.width),
                margin: "auto",
            },
        },
    });

    const icon = style("icon", {});
    const input = style("input", {});

    const buttonLoader = style("buttonLoader", {});

//.........这里部分代码省略.........

export const frameHeaderClasses = useThemeCache(() => {
    const vars = frameVariables();
    const globalVars = globalVariables();
    const formElVars = formElementsVariables();
    const style = styleFactory("frameHeader");

    const root = style({
        display: "flex",
        position: "relative",
        alignItems: "center",
        flexWrap: "nowrap",
        width: percent(100),
        color: colorOut(vars.colors.fg),
        zIndex: 1,
        borderBottom: singleBorder(),
        ...paddings({
            top: 4,
            right: vars.footer.spacing,
            bottom: 4,
            left: vars.footer.spacing,
        }),
        $nest: {
            "& .button + .button": {
                marginLeft: unit(12 - formElVars.border.width),
            },
        },
    });

    const backButton = style("backButton", {
        display: "flex",
        flexWrap: "nowrap",
        justifyContent: "center",
        alignItems: "flex-end",
        flexShrink: 1,
        marginLeft: unit(-6),
    });

    const heading = style("heading", {
        display: "flex",
        alignItems: "center",
        flexGrow: 1,
        margin: 0,
        textOverflow: "ellipsis",
        fontWeight: globalVars.fonts.weights.semiBold,
        fontSize: unit(globalVars.fonts.size.large),
    });

    const left = style("left", {
        fontSize: unit(vars.header.fontSize),
    });

    const centred = style("centred", {
        textAlign: "center",
        textTransform: "uppercase",
        fontSize: unit(globalVars.fonts.size.small),
        color: colorOut(globalVars.mixBgAndFg(0.6)),
        fontWeight: globalVars.fonts.weights.semiBold,
    });

    const spacerWidth = globalVars.icon.sizes.large - (globalVars.gutter.half + globalVars.gutter.quarter);
    const leftSpacer = style("leftSpacer", {
        display: "block",
        height: unit(spacerWidth),
        flexBasis: unit(spacerWidth),
        width: unit(spacerWidth),
    });

    const action = style("action", {
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        position: "relative",
        flexShrink: 1,
        height: unit(formElVars.sizing.height),
        width: unit(spacerWidth),
        color: colorOut(vars.colors.fg),
        $nest: {
            "&:not(.focus-visible)": {
                outline: 0,
            },
            "&:hover, &:focus, &.focus-visible": {
                color: colorOut(globalVars.mainColors.primary),
            },
        },
    });

    return {
        root,
        backButton,
        heading,
        left,
        centred,
        leftSpacer,
        action,
    };
});

export const dropDownClasses = useThemeCache(() => {
    const vars = dropDownVariables();
    const globalVars = globalVariables();
    const style = styleFactory("dropDown");
    const shadows = shadowHelper();
    const mediaQueries = layoutVariables().mediaQueries();

    const root = style({
        position: "relative",
    });

    const contents = style("contents", {
        position: "absolute",
        minWidth: unit(vars.sizing.width),
        backgroundColor: colorOut(vars.contents.bg),
        color: colorOut(vars.contents.fg),
        overflow: "auto",
        ...shadowOrBorderBasedOnLightness(vars.contents.bg, borders({}), shadows.dropDown()),
        ...borders(vars.contents.border),
        zIndex: 3,
        $nest: {
            "&.isParentWidth": {
                minWidth: "initial",
            },
            "&.isOwnWidth": {
                width: "initial",
            },
            "&.isRightAligned": {
                right: 0,
                top: 0,
            },
            "& .frame": {
                boxShadow: "none",
            },
            "&.noMinWidth": {
                minWidth: 0,
            },
            "&.hasVerticalPadding": {
                ...paddings({
                    vertical: 12,
                    horizontal: important(0),
                }),
            },
            "&:empty": {
                display: "none",
            },
        },
    });

    const asModal = style("asModal", {
        $nest: {
            "&.hasVerticalPadding": paddings({
                vertical: 12,
            }),
        },
    });

    const likeDropDownContent = style("likeDropDownContent", {
        ...shadows.dropDown(),
        backgroundColor: colorOut(globalVars.mainColors.bg),
        ...borders(),
    });

    const items = style("items", {
        fontSize: unit(globalVars.fonts.size.medium),
    });

    const metaItems = style("metaItems", {
        $nest: {
            "&&": {
                display: "block",
            },
        },
        ...paddings(vars.metas.padding),
    });

    const metaItem = style("metaItem", {
        $nest: {
            "& + &": {
                paddingTop: unit(vars.item.padding.top),
            },
        },
        ...fonts(vars.metas.font),
    });

    // wrapping element
    const item = style("item", {
        display: "flex",
        alignItems: "center",
        justifyContent: "flex-start",
        width: percent(100),
        color: "inherit",
        ...userSelect("none"),
        textAlign: "left",
        lineHeight: globalVars.lineHeights.condensed,
    });

    const section = style("section", {
        display: "block",
    });
//.........这里部分代码省略.........

export const meBoxMessageClasses = useThemeCache(() => {
    const globalVars = globalVariables();
    const vars = meBoxMessageVariables();
    const style = styleFactory("meBoxMessage");

    const root = style({
        display: "block",
        $nest: {
            "& + &": {
                borderTop: `solid 1px ${colorOut(globalVars.border.color)}`,
            },
        },
    });

    const link = style("link", {
        ...userSelect(),
        display: "flex",
        flexWrap: "nowrap",
        color: "inherit",
        ...paddings(vars.spacing.padding),
        ...buttonStates({
            allStates: {
                textShadow: "none",
            },
            hover: {
                backgroundColor: colorOut(globalVars.states.hover.color),
            },
            focus: {
                backgroundColor: colorOut(globalVars.states.focus.color),
            },
            active: {
                backgroundColor: colorOut(globalVars.states.active.color),
            },
        }),
    });

    const imageContainer = style("imageContainer", {
        position: "relative",
        width: unit(vars.imageContainer.width),
        height: unit(vars.imageContainer.width),
        flexBasis: unit(vars.imageContainer.width),
        borderRadius: percent(50),
        overflow: "hidden",
        border: `solid 1px ${globalVars.border.color.toString()}`,
    });

    const image = style("image", {
        width: unit(vars.imageContainer.width),
        height: unit(vars.imageContainer.width),
        ...objectFitWithFallback(),
    });

    const status = style("status", {
        position: "relative",
        width: unit(vars.unreadDot.width),
        flexBasis: unit(vars.unreadDot.width),
        $nest: {
            "&.isUnread": {
                $nest: {
                    "&:after": {
                        ...absolutePosition.middleRightOfParent(),
                        content: quote(""),
                        height: unit(vars.unreadDot.width),
                        width: unit(vars.unreadDot.width),
                        backgroundColor: globalVars.mainColors.primary.toString(),
                        borderRadius: percent(50),
                    },
                },
            },
        },
    });

    const contents = style("contents", {
        flexGrow: 1,
        ...paddings({
            left: vars.spacing.padding.left,
            right: vars.spacing.padding.right,
        }),
        maxWidth: calc(`100% - ${unit(vars.unreadDot.width + vars.imageContainer.width)}`),
    });

    const message = style("message", {
        lineHeight: globalVars.lineHeights.excerpt,
        color: colorOut(globalVars.mainColors.fg),
    });

    return { root, link, imageContainer, image, status, contents, message };
});