import { __makeTemplateObject } from "tslib";
import styled, { css } from "styled-components";
import P2 from "../../../typography/P2";
import { LIGHT_THEME } from "../../../Pallette/themes";
import { BorderRadius, MEDIA, Padding } from "../../../Pallette/style-utils";
import { defaultThemeSnackBar } from "../../themes";
import { getTheme } from "../../../utils/theme/getTheme";
var COMPONENT_NAME = "snackBar";
export var SnackBarStyled = styled.div.attrs(function (props) { return ({
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeSnackBar,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n  transition: all 0.3s;\n  height: 48px;\n  .snack-bar__text {\n    word-break: break-all;\n  }\n\n  &.snack-bar-enter,\n  &.snack-bar-exit {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  &.snack-bar-enter-done {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  &.snack-bar-exit-active {\n    position: absolute;\n  }\n\n  .action-button {\n    margin-left: auto;\n  }\n"], ["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  display: flex;\n  align-items: center;\n  pointer-events: all;\n  transition: all 0.3s;\n  height: 48px;\n  .snack-bar__text {\n    word-break: break-all;\n  }\n\n  &.snack-bar-enter,\n  &.snack-bar-exit {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  &.snack-bar-enter-done {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  &.snack-bar-exit-active {\n    position: absolute;\n  }\n\n  .action-button {\n    margin-left: auto;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: ", ";\n    color: ", ";\n    ", ";\n    ", ";\n  "], ["\n    background: ", ";\n    color: ", ";\n    ", ";\n    ", ";\n  "])), theme.components[COMPONENT_NAME].background, theme.components[COMPONENT_NAME].color, BorderRadius.roundBorder(theme.shape.borderRadiusMedium), theme.shadows.sp.bottom);
}, Padding.allSide(3, 5), MEDIA.desktopXl(templateObject_2 || (templateObject_2 = __makeTemplateObject(["width: 1290px"], ["width: 1290px"]))), MEDIA.desktopL(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 960px"], ["width: 960px"]))), MEDIA.desktopM(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: 678px"], ["width: 678px"]))), MEDIA.mobile(templateObject_5 || (templateObject_5 = __makeTemplateObject(["width: calc(100vw - 48px)"], ["width: calc(100vw - 48px)"]))));
SnackBarStyled.defaultProps = {
    theme: LIGHT_THEME
};
export var SnackBarCounterStyled = styled(P2).attrs(function (props) { return ({
    as: "div",
    type: "corvus",
    theme: getTheme({
        theme: props.theme,
        defaultTheme: defaultThemeSnackBar,
        componentName: COMPONENT_NAME
    })
}); })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  width: 30px;\n  height: 32px;\n  right: -15px;\n  top: -16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  position: absolute;\n  width: 30px;\n  height: 32px;\n  right: -15px;\n  top: -16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
    var theme = _a.theme;
    return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background: ", ";\n    ", ";\n    ", ";\n    color: ", ";\n  "], ["\n    background: ", ";\n    ", ";\n    ", ";\n    color: ", ";\n  "])), theme.components[COMPONENT_NAME].backgroundCounter, BorderRadius.roundBorder(theme.shape.borderRadiusMedium), Padding.allSide(1, 2), theme.components[COMPONENT_NAME].color);
});
SnackBarCounterStyled.defaultProps = {
    theme: LIGHT_THEME
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
