"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Links = exports.Inner = exports.Wrapper = void 0;
const styles_1 = require("../../styles");
const utils_1 = require("../../styles/utils");
const Flex_1 = require("../Flex");
const theme_1 = require("../../styles/theme");
const getVariant = ({ theme: _theme, variant }) => ({
    default: {
        Wrapper: {
            boxShadow: '0 -2px 0 0 #dfe3e6',
        },
        Links: {
            a: {
                color: _theme.colors.baseText,
            },
        },
    },
    transparent: {
        Wrapper: {},
        Links: {
            a: {
                color: 'white',
            },
        },
    },
}[variant || 'default']);
exports.Wrapper = styles_1.styled.div((props) => (Object.assign({ width: '100%', height: props.theme.footer.height }, getVariant(props).Wrapper)));
exports.Inner = styles_1.styled(Flex_1.Flex)(({ theme: _theme }) => ({
    height: _theme.footer.height,
}));
exports.Links = styles_1.styled.ul((props) => (Object.assign(Object.assign({ listStyle: 'none', margin: 0, marginLeft: 'auto', display: 'inline-flex' }, getVariant(props).Links), { li: {
        display: 'inline-flex',
        alignItems: 'center',
        fontSize: '14px',
        lineHeight: '23px',
        marginLeft: '30px',
        fontWeight: 500,
        a: Object.assign(Object.assign({}, utils_1.textLinkInverted), { color: theme_1.theme.colors.gray[3], '&:hover': {
                color: theme_1.theme.colors.highlightText,
            } }),
    } })));
//# sourceMappingURL=styles.js.map