import React from 'react';
import styled, { css } from 'styled-components';
import { Body1, Footnote1 } from '../Typography';
import { applyEllipsis, applyNoSelect } from '../../mixins';
import { secondary } from '../../tokens';
export var StyledRoot = styled.div.withConfig({
    displayName: "Basebox__StyledRoot",
    componentId: "sc-a5c1d526-0"
})([
    "",
    " position:relative;align-items:flex-start;display:flex;cursor:pointer;"
], applyNoSelect);
export var StyledContentWrapper = styled.label.withConfig({
    displayName: "Basebox__StyledContentWrapper",
    componentId: "sc-a5c1d526-1"
})([
    "position:relative;align-items:flex-start;display:flex;width:100%;cursor:inherit;"
]);
export var StyledInput = styled.input.withConfig({
    displayName: "Basebox__StyledInput",
    componentId: "sc-a5c1d526-2"
})([
    "position:absolute;&:focus{outline:0 none;}"
]);
export var StyledTrigger = styled.div.withConfig({
    displayName: "Basebox__StyledTrigger",
    componentId: "sc-a5c1d526-3"
})([
    "box-sizing:border-box;position:relative;transition:",
    ";"
], function(param) {
    var theme = param.theme;
    return theme.lowPerformance ? 'unset' : 'all 0.1s ease-in-out';
});
export var StyledContent = styled.div.withConfig({
    displayName: "Basebox__StyledContent",
    componentId: "sc-a5c1d526-4"
})([
    "display:flex;flex-direction:column;margin-left:0.75rem;"
]);
export var StyledLabel = styled(Body1).withConfig({
    displayName: "Basebox__StyledLabel",
    componentId: "sc-a5c1d526-5"
})([
    "",
    ""
], function(param) {
    var singleLine = param.singleLine;
    return singleLine && css([
        "",
        ""
    ], applyEllipsis);
});
export var StyledDescription = styled(Footnote1).withConfig({
    displayName: "Basebox__StyledDescription",
    componentId: "sc-a5c1d526-6"
})([
    "color:",
    ";",
    ""
], secondary, function(param) {
    var singleLine = param.singleLine;
    return singleLine && css([
        "",
        ""
    ], applyEllipsis);
});
