@st-namespace 'SectionNotification-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: value, color, fallback, applyOpacity;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: errorColor;
}

/*Defaults*/
:vars {
    BorderRadius: 2px;
    BorderWidth: 1px;

    /* The paddings are 9px and 5px, because we need to keep the height 52px and 44px */
    MainVerticalPadding: 9px;
    MainCompactVerticalPadding: 5px;
    MainLeftPadding: 12px;
    MainRightPadding: 16px;
    ContentPadding: 8px;

    TextMinWidth: 200px;
    DefaultTextColor: #000000;
    DefaultWiredTextColor: color(color-5);
    FontSize: 14px;
    LineHeight: 20px;
    SuccessColor: #008250;

    DefaultBackgroundColor: applyOpacity(#000000, 0.05);
    DefaultWiredBackgroundColor: applyOpacity(color(color-5), 0.05);
    ErrorBackgroundColor: applyOpacity(value(errorColor), 0.1);
    AlertBackgroundColor: applyOpacity(#FFB600, 0.1);
    SuccessBackgroundColor: applyOpacity(value(SuccessColor), 0.1);
    SuccessIconColor: value(SuccessColor);
}

/*Overrides*/
:vars {
    BackgroundColor: --overridable;
    TextColor: --overridable;
}

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-section-notification-background-color);

/*
 * Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-section-notification-text-color);

:vars {
    MainBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
    MainTextColor: color(fallback(value(TextColor), value(DefaultTextColor)));
    WiredTextColor: color(fallback(value(TextColor), value(DefaultWiredTextColor)));
    WiredBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultWiredBackgroundColor)));
}

.root {
    -st-states: error, alert, wired, success, rtl, size(enum(regular, compact));
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #FFFFFF;
    border-radius: value(BorderRadius);
}

.main {
    display: flex;
    flex: 1;
    /* is used to allow controls to wrap on the next line when available width is not enough */
    flex-wrap: wrap;
    justify-content: center;

    padding: value(MainVerticalPadding) value(MainRightPadding) value(MainVerticalPadding) value(MainLeftPadding);

    background-color: value(MainBackgroundColor);
    border: value(BorderWidth) solid applyOpacity(#FFFFFF, 0.4);
    border-radius: value(BorderRadius);

    color: value(MainTextColor);
    font-family: "HelveticaNeueW01-55Roma", "Arial", "sans-serif";
    font-size: value(FontSize);
}

.contentsWrapper {
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 6px 0;
}

.buttonsWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: value(MainVerticalPadding) value(ContentPadding);
}

.buttonsWrapper:empty {
    display: none;
}

.icon {
    transform: translateX(calc(-1 * (value(ContentPadding) / 2)));
    height: 20px;
}

.root:rtl .icon {
    transform: translateX(calc((value(ContentPadding) / 2)));
}

.icon svg {
    height: value(LineHeight);
}

.text {
    flex: 1;
    min-width: value(TextMinWidth);
    margin: 0;
    line-height: value(LineHeight);
}

.text:first-child {
    margin: 0;
}

.button {
    margin: 0 calc(value(ContentPadding) / 2);
}

.root:error .main {
    background-color: value(ErrorBackgroundColor);
}

.root:alert .main {
    background-color: value(AlertBackgroundColor);
}

.root:wired {
    background-color: applyOpacity(#FFFFFF, 0);
}

.root:wired .main {
    background-color: value(WiredBackgroundColor);
    color: value(WiredTextColor);
}

.root:wired .icon svg:not([fill="currentColor"]) path{
    stroke: value(WiredTextColor);
}

.root:success .main {
    background-color: value(SuccessBackgroundColor);
}

.root:success .icon svg:not([fill="currentColor"]) path{
    stroke: value(SuccessIconColor);
}
/* --------- new icons ---------- */

.root:error .icon svg[fill="currentColor"]{
    color: color(value(errorColor));
}

.root:success .icon svg[fill="currentColor"]{
    color: color(value(SuccessIconColor));
}

.root:wired .icon svg[fill="currentColor"]{
    color: color(value(WiredTextColor));
}

.root:size(compact) .main {
    padding-top: value(MainCompactVerticalPadding);
    padding-bottom: value(MainCompactVerticalPadding);
}

.root:size(compact) .buttonsWrapper {
    margin-top: value(MainCompactVerticalPadding);
    margin-bottom: value(MainCompactVerticalPadding);
}

/* st-namespace-reference="../../../../src/components/SectionNotification/SectionNotification.deprecated.st.css" */