import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import P1 from "../../../typography/P1";
import P2 from "../../../typography/P2";
import { Padding } from "../../../Pallette/style-utils";
import { LIGHT_THEME } from "../../../Pallette/themes";
import { defaultThemeTabs } from "../../theme";
import { getTheme } from "../../../utils/theme/getTheme";
var COMPONENT_NAME = "tab";
export var TabStyled = styled.button.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        componentName: COMPONENT_NAME,
        defaultTheme: defaultThemeTabs
    })
}); })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  border-radius: 16px;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  ", "\n\n  ", "\n  \n  .tab__icon {\n    color: unset;\n  }\n"], ["\n  border: none;\n  background: none;\n  cursor: pointer;\n  display: flex;\n  border-radius: 16px;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  ", "\n\n  ", "\n  \n  .tab__icon {\n    color: unset;\n  }\n"])), function (_a) {
    var _b = _a.size, size = _b === void 0 ? "l" : _b;
    switch (size) {
        case "l":
            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          padding: 4px 12px 4px 12px;\n        "], ["\n          padding: 4px 12px 4px 12px;\n        "])));
        case "m":
            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          padding: 4px 12px 4px 12px;\n          height: 24px;\n          border-radius: 8px;\n        "], ["\n          padding: 4px 12px 4px 12px;\n          height: 24px;\n          border-radius: 8px;\n        "])));
    }
    return "";
}, function (_a) {
    var theme = _a.theme, isDisabled = _a.isDisabled;
    if (isDisabled) {
        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        cursor: not-allowed;\n        margin: 0;\n        color: ", ";\n        background: none;\n      "], ["\n        cursor: not-allowed;\n        margin: 0;\n        color: ", ";\n        background: none;\n      "])), theme.components[COMPONENT_NAME].colorDisabled);
    }
    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover:enabled {\n        transition: all 0.1s;\n        color: ", ";\n        background: ", ";\n        box-shadow: none;\n      }\n    "], ["\n      color: ", ";\n\n      &:hover:enabled {\n        transition: all 0.1s;\n        color: ", ";\n        background: ", ";\n        box-shadow: none;\n      }\n    "])), theme.components[COMPONENT_NAME].colorDefault, theme.components[COMPONENT_NAME].colorHover, theme.components[COMPONENT_NAME].backgroundHover);
});
TabStyled.defaultProps = {
    theme: LIGHT_THEME
};
export var TabContent = styled(P1)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), Padding.allSide(1));
export var TabContentS = styled(P2)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), Padding.allSide(1));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
