/* ------------------------------------------------------------------------------
*
*  # Alert component
*
*  Overrides for alerts bootstrap component
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


// Base
// -------------------------

.alert {
    position: relative;
    padding-left: (@alert-padding + 5);
    padding-right: (@alert-padding + 5);

    // Alert heading
    .alert-heading {
        margin-top: 0;
        margin-bottom: 5px;
    }

    // Provide class for links that match alerts
    .alert-link {
        color: inherit;
    }

    // Close button
    .close {
        float: left;

        &,
        &:hover,
        &:focus {
            color: inherit;
        }
    }
}


// Alternate styles
// -------------------------

// Primary - custom added
.alert-primary {
    .alert-variant(@alert-primary-bg; @alert-primary-border; @alert-primary-text);

    &,
    .close {
        color: darken(@color-primary-800, 10%);
    }
}

// Success
.alert-success {
    &,
    .close {
        color: darken(@color-success-800, 10%);
    }
}

// Info
.alert-info {
    &,
    .close {
        color: darken(@color-info-800, 10%);
    }
}

// Warning
.alert-warning {
    &,
    .close {
        color: darken(@color-warning-800, 10%);
    }
}

// Danger
.alert-danger {
    &,
    .close {
        color: darken(@color-danger-800, 10%);
    }
}


// Additional styling
// -------------------------

// Rounded alert
.alert.alert-rounded {
    border-radius: 100px;
    padding-left: (@alert-padding + 10);
    padding-right: (@alert-padding + 10);
}

// Alert as a component
.alert-component {
    &[class*=alert-styled-] {
        background-color: #fff;
    }
}

// Custom background color
.alert[class*=bg-] {
    a,
    .alert-link {
        color: #fff;
    }
}


// Styled alerts
// -------------------------

.alert {

    // Icon variations
    &[class*=alert-styled-],
    .ui-pnotify[class*=alert-styled-] > & {

        // Icon base
        &:after {
            content: '\e9a2';
            font-family: 'icomoon';
            color: #fff;
            width: (((@alert-padding * 2) + @icon-font-size) - 2);
            right: -(((@alert-padding * 2) + @icon-font-size) - 2);
            text-align: center;
            position: absolute;
            top: 50%;
            margin-top: -(@icon-font-size / 2);
            font-size: @icon-font-size;
            font-weight: 400;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        // Danger icon
        &.alert-danger:after,
        &[class*=bg-danger]:after {
            content: '\ed64';
        }

        // Success icon
        &.alert-success:after,
        &[class*=bg-success]:after {
            content: '\ed6e';
        }

        // Warning icon
        &.alert-warning:after,
        &[class*=bg-warning]:after {
            content: '\e9bd';
        }

        // Info icon
        &.alert-info:after,
        &[class*=bg-info]:after {
            content: '\e9b9';
        }
    }

    // Right icon position
    &.alert-styled-right,
    .ui-pnotify.alert-styled-right > & {
        &:after {
            right: auto;
            left: -(((@alert-padding * 2) + @icon-font-size) - 2);
        }
    }

    // With custom icon
    &.alert-styled-custom,
    .ui-pnotify.alert-styled-custom > & {
        &:after {
            content: "\e81b"; // Change icon code for custom alert
        }
    }

    // Styled alert with left icon
    &.alert-styled-left {
        border-right-width: (((@alert-padding * 2) + @icon-font-size) - 2);

        &[class*=bg-] {
            border-right-color: fade(#000, 15%)!important;
        }
    }


    // Styled alert with right icon
    &.alert-styled-right {
        border-left-width: (((@alert-padding * 2) + @icon-font-size) - 2);

        &[class*=bg-] {
            border-left-color: fade(#000, 15%)!important;
        }
    }
}


// Alert arrow
// -------------------------

.alert {

    // Left arrow
    &[class*=alert-arrow-]:before,
    .ui-pnotify[class*=alert-arrow-] > &:before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        border-right: 5px solid;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right-color: inherit;
        margin-top: -5px;
    }

    // Right arrow
    &.alert-arrow-right:before,
    .ui-pnotify.alert-arrow-right > &:before {
        right: auto;
        left: 0;
        border-right: 0;
        border-left: 5px solid;
        border-left-color: inherit;
    }
}


// Specific styling for PNotify notifications
// -------------------------

// Inherit colors
.ui-pnotify[class*=alpha-] > & {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}

// Left position
.ui-pnotify.alert-styled-left {
    > .alert {
        &:extend(.alert.alert-styled-left);
    }

    &[class*=bg-] > .alert {
        &:extend(.alert.alert-styled-left[class*=bg-]);
    }
}

// Right position
.ui-pnotify.alert-styled-right {
    > .alert {
        &:extend(.alert.alert-styled-right);
    }

    &[class*=bg-] > .alert {
        &:extend(.alert.alert-styled-right[class*=bg-]);
    }
}
