import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import { LIGHT_THEME } from "../../../Pallette/themes";
import { defineResponsibleWidth, defineResponsibleHeight } from "../../../utils/defineResponsibleSize";
export var ListStyled = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin: 0;\n  padding: 0;\n  ", ";\n  ", ";\n"], ["\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin: 0;\n  padding: 0;\n  ", ";\n  ", ";\n"])), function (_a) {
    var width = _a.width;
    return defineResponsibleWidth(width);
}, function (_a) {
    var height = _a.height;
    return defineResponsibleHeight(height);
});
ListStyled.defaultProps = {
    theme: LIGHT_THEME
};
export var ListItemsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  transition: all 0.3s;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  transition: all 0.3s;\n\n  ", "\n"])), function (_a) {
    var isExpand = _a.isExpand, type = _a.type, isHeader = _a.isHeader;
    if (type === "collapse" && isHeader) {
        return isExpand
            ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            opacity: 1;\n            max-height: 100%;\n          "], ["\n            opacity: 1;\n            max-height: 100%;\n          "]))) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            opacity: 0;\n            max-height: 0;\n            display: none;\n          "], ["\n            opacity: 0;\n            max-height: 0;\n            display: none;\n          "])));
    }
    return null;
});
ListItemsWrapper.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
