/*
Alerts

These are used to provide alerts to the user. They are sometimes used to show descriptive messages related to input validation, server responses, or special information relevant to the user's current account state.

.alert--success - Success
.alert--warning - Warning
.alert--severe-warning - Severe warning
.alert--error - Error
.alert--addon - Addon information / upsell

Markup:
<div class="alert {{modifier_class}} alert--dismissable">
    <button type="button" class="svgicon--btn alert__close"><span class="screen-reader-only">close alert</span></button>
    <span class="text-bold">Congratulations</span>, This is an alert and this is what a <a class="alert__link" href="#">link</a> looks like
</div>

Name: alert

Styleguide 2.15
*/

/*
Add-on Alerts

These are designed to look like our alerts, but will be used in Evergage to increase add-on adoption.

Markup:
<div class="alert alert--addon alert--dismissable">
    <button type="button" class="svgicon--btn alert__close alert__close--addon"><span class="screen-reader-only">close alert</span></button>
    <span class="alert__icon alert__icon--growth"></span>
    <span class="alert__text-with-icon"><span class="text-bold">Grow your portfolio!&nbsp;</span>Find property owners searching for professional managers in your area.&nbsp;&nbsp;<a class="alert__link" href="#">Learn more</a></span>
</div>
<div class="form__vertical-spacer form__vertical-spacer--large"></div>
<div class="alert alert--addon alert--dismissable">
    <button type="button" class="svgicon--btn alert__close alert__close--addon"><span class="screen-reader-only">close alert</span></button>
    <span class="alert__icon alert__icon--protect"></span>
    <span class="alert__text-with-icon"><span class="text-bold">Protect yourself and your tenants&nbsp;.</span>Require renters insurance to reduce risk and track enrollment.&nbsp;&nbsp;<a class="alert__link" href="#">Learn more</a></span>
</div>
<div class="form__vertical-spacer form__vertical-spacer--large"></div>
<div class="alert alert--addon alert--dismissable">
    <button type="button" class="svgicon--btn alert__close alert__close--addon"><span class="screen-reader-only">close alert</span></button>
    <span class="alert__icon alert__icon--time"></span>
    <span class="alert__text-with-icon"><span class="text-bold">Save time by letting us print and mail checks for you.&nbsp;</span>Eliminate the hassle of ordering check stock, printing checks, and stuffing envelopes.&nbsp;&nbsp;<a class="alert__link" href="#">Learn more</a></span>
</div>

Name: alertAddon

Styleguide 2.15.1
*/

/*
Infobar Alerts

These will be used to display in-app messages to customers about phones being down or outages

Markup:
<div style="height: 80px; position: relative;">
    <div class="alert alert--infobar">
        <button type="button" class="svgicon--btn alert__close alert__close--infobar"><span class="screen-reader-only">close alert</span></button>
        <span class="alert__centered-text-with-icon">
            <span class="alert__icon alert__icon--phone"></span>Phone support will be unavailable on June 14th, 2018 from 9:30am to 12:30pm (EST). Need help?&nbsp;<a class="alert__link" href="#">Submit a support ticket</a>
        </span>
    </div>
</div>
<div style="height: 80px; position: relative;">
    <div class="alert alert--infobar-urgent">
        <button type="button" class="svgicon--btn alert__close alert__close--infobar"><span class="screen-reader-only">close alert</span></button>
        <span class="alert__centered-text-with-icon">
            <div>
                <span class="alert__urgent-icon"></span><span class="alert__urgent-text">ACTION REQUIRED</span>
            </div>
            <div>
                This is an alert to notify users of a urgent problems, system outages or sitewide errors.&nbsp;
                <a class="alert__link" href="#">View status page</a>
            </div>
        </span>
    </div>
</div>

Name: alertInfobar

Styleguide 2.15.2
*/

/*
Survey Alerts

These are designed to look like our alerts, but will be used in Evergage to encourage customers to take a survey.

Markup:
<div class="alert alert--survey-blue alert--addon-call-to-action flex-row flex-align--center alert--dismissable">
    <button type="button" class="svgicon--btn alert__close alert__close--addon"><span class="screen-reader-only">close alert</span></button>
    <div class="flex-column">
        <div class="text-vertical-align-middle display--inline-block alert__cta-border">
            <div class="svgicon svgicon--survey-white svgicon--40 display--block"></div>
        </div>
        <div class="text-vertical-align-middle display--inline-block alert__cta-spacer">
            <b>We value your opinion!</b>
            <br/>
            <p>Please take our survey so we can build the best product possible.</p>
        </div>
    </div>
    <div class="flex-column text-right flex-size--0">
        <a class="btn btn--survey-white text-vertical-align-middle
        text-nowrap padding-left--lg padding-right--lg" href="/manager/app/integratedservices/elease">Take survey</a>
    </div>
</div>
<div class="form__vertical-spacer form__vertical-spacer--large"></div>
<div class="alert alert--survey-white alert--addon-call-to-action flex-row flex-align--center alert--dismissable">
    <button type="button" class="svgicon--btn alert__close alert__close--addon"><span class="screen-reader-only">close alert</span></button>
    <div class="flex-column">
        <div class="text-vertical-align-middle display--inline-block alert__cta-border alert__cta-border--grey">
            <div class="svgicon svgicon--survey-blue svgicon--40 display--block"></div>
        </div>
        <div class="text-vertical-align-middle display--inline-block alert__cta-spacer">
            <b>We value your opinion!</b>
            <br/>
            <p>Please take our survey so we can build the best product possible.</p>
        </div>
    </div>
    <div class="flex-column text-right flex-size--0">
        <a class="btn btn--survey-white text-vertical-align-middle
        text-nowrap padding-left--lg padding-right--lg" href="/manager/app/integratedservices/elease">Take survey</a>
    </div>
</div>

Name: alertSurvey

Styleguide 2.15.3
*/

// Alert colors
@color-alert-text-default: @theme-blue1;
@color-alert-bg-default: @theme-blue7;
@color-alert-border-default: @theme-blue8;

@color-alert-text-success: @theme-green4;
@color-alert-bg-success: @theme-green2;
@color-alert-border-success: @theme-green3;

@color-alert-text-warning: @theme-yellow4;
@color-alert-bg-warning: @theme-yellow1;
@color-alert-border-warning: @theme-yellow5;

@color-alert-text-severe-warning: @theme-orange2;
@color-alert-bg-severe-warning: @theme-orange3;
@color-alert-border-severe-warning: @theme-orange6;

@color-alert-text-error: @theme-red3;
@color-alert-bg-error: @theme-red1;
@color-alert-border-error: @theme-red5;

@color-alert-text-addon: @theme-purple2;
@color-alert-bg-addon: @theme-purple1;
@color-alert-border-addon: @theme-purple2;

.alert {
    display: block;
    line-height: 20px;
    overflow: hidden;
    padding: 15px 20px;
    border-radius: @border-radius-default;
    font-size: @font-size-base;
    color: @color-alert-text-default;
    background-color: @color-alert-bg-default;
    border: 1px solid @color-alert-border-default;
    box-sizing: border-box;
}

.alert--success {
    color: @color-alert-text-success;
    background-color: @color-alert-bg-success;
    border-color: @color-alert-border-success;

    .alert__close {
        background-image: url("@{icons}delete-green.svg");
    }
}

.alert--warning {
    color: @color-alert-text-warning;
    background-color: @color-alert-bg-warning;
    border-color: @color-alert-border-warning;

    .alert__close {
        background-image: url("@{icons}delete-brown.svg");
    }
}

.alert--severe-warning {
    color: @color-alert-text-severe-warning;
    background-color: @color-alert-bg-severe-warning;
    border-color: @color-alert-border-severe-warning;

    .alert__close {
        background-image: url("@{icons}delete-orange.svg");
    }
}

.alert--error {
    color: @color-alert-text-error;
    background-color: @color-alert-bg-error;
    border-color: @color-alert-border-error;

    .alert__close {
        background-image: url("@{icons}delete-red.svg");
    }
}

.alert--addon {
    color: @color-alert-text-addon;
    background-color: fadeout(@color-alert-bg-addon, 92%);
    border-color: @color-alert-border-addon;

    .alert__close {
        background-image: url("@{icons}delete-purple.svg");
    }
}

.alert--addon-call-to-action {
    padding: 25px;
    font-size: @font-size--16;
    height: 100px;
}

.alert--survey-blue {
    height: 90px;
    color: #FFFFFF;
    background-color: @theme-blue3;
    border-color: @theme-blue3;

    p {
        font-size: @font-size-base;
        margin: 0;
    }

    .alert__close {
        opacity: 1;
        background-image: url("@{icons}delete-white.svg");
        &:hover {
            opacity: 0.5;
        }
    }
}

.alert--survey-white {
    height: 90px;
    color: #FFFFFF;
    background-color: #FFFFFF;
    border-color: @theme-grey3;
    color: @theme-grey9;

    b {
        color: @theme-blue3;
    }

    p {
        font-size: @font-size-base;
        margin: 0;
    }

    .alert__close {
        opacity: 1;
        background-image: url("@{icons}delete-grey.svg");
        &:hover {
            opacity: 0.5;
        }
    }
}

.alert--dismissable {
    position: relative;
    padding-right: 50px;
}

.alert--in-panel {
    margin-bottom: 15px;
}

.alert--margin-top {
    margin-top: 15px;
}

.alert--header-legacy {
    position: absolute;
    left: 0;
    right: 0;
}

.alert--infobar,
.alert--infobar-urgent {
    position: relative;
    left: 0;
    right: 0;
    background-color: @theme-blue3;
    color: white;
    border-radius: 0;
    border: 0;
    text-align: center;

    .alert__close {
        opacity: 1;
        background-image: url("@{icons}delete-white.svg");
        &:hover {
            opacity: 0.5;
        }
    }
}

.alert--infobar-urgent {
    background-color: @theme-red6;
}

.alert__close {
    position: absolute;
    top: 18px;
    right: 15px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    opacity: 0.5;
    background-image: url("@{icons}delete-blue.svg");
    background-size: 100%;
    background-repeat: no-repeat;

    &:hover,
    &:focus {
        opacity: 1;
    }
}

.alert__close--addon,
.alert__close--infobar {
    width: 12px;
    height: 12px;
}

.alert__close--infobar {
    top: 19px;
    right: 30px;
}

.alert__link {
    .text-bold;
    color: inherit;
    text-decoration: underline;

    &:active,
    &:visited {
        color: inherit;
    }

    &:hover,
    &:focus {
        opacity: 0.75;
    }
}

.alert__icon {
    position: absolute;
    top: ~"calc(50% - 15px)";
    left: 10px;
    height: 30px;
    width: 30px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.alert__icon--growth {
    background-image: url('@{icons}growth-purple.svg');
}

.alert__icon--protect {
    background-image: url('@{icons}protect-purple.svg');
}
.alert__icon--time {
    background-image: url('@{icons}time-purple.svg');
}

.alert__icon--phone {
    top: ~"calc(50% - 12.5px)";
    height: 25px;
    width: 25px;
    background-image: url('@{icons}phone-white.svg');
}

.alert__urgent-icon {
    display: inline-block;
    height: 25px;
    width: 25px;
    margin-bottom: -8px;
    background-image: url('@{icons}urgent-white.svg');
}

.alert__urgent-text {
    display: inline-block;
    .text-bold;
    padding-left: 8px;
    padding-bottom: 5px;
}

.alert__text-with-icon {
    display: flex;
    flex-wrap: wrap;
    padding-left: 37px;
}

.alert__centered-text-with-icon {
    display: inline-block;
    position: relative;
    padding: 0 50px;
}

.alert__fa-icon {
    float: left;
    font-size: 18px;
    padding-top: 2px;
    padding-right: 15px;
}

.alert__cta-border {
    border-right: 1px solid #FFFFFF;
    padding-right: 25px;
}

.alert__cta-border--grey {
    border-right-color: @theme-grey10;
}

.alert__cta-spacer {
    margin-left: 25px;
}