// ------------------------------
// edX Pattern Library: Utilities - Alerts
//
// About: Contains base styling for alerts.
// ----------------------------

// #UTILITIES
// #GENERAL
// #INDIVIDUAL CASES

// ----------------------------
// #UTILITIES
// ----------------------------
@mixin alert($alert-color, $alert-color-glow) {
    border: rem(1) solid $alert-color;
    box-shadow: inset 0 0 0 rem(4) $alert-color-glow;

    .alert-icon {
        color: $white;
        background-color: $alert-color;
    }
}

@mixin alert-message($width) {

    @media(min-width: $bp-screen-md) {
        @include float(left);
        width: $width;
        padding: spacing-vertical(small);
        padding-top: 0;
        padding-bottom: 0;
    }

    :last-child {
        // keeps the message compact
        margin-bottom: 0;
    }
}

// ----------------------------
// #GENERAL
// ----------------------------
.alert {
    background-color: $white;
    border: rem(1) solid palette(grayscale, accent);
    padding: spacing-vertical(small) spacing-horizontal(base);
    box-shadow: inset 0 0 0 rem(4) palette(grayscale, back);
    overflow: auto;

    &.alert-slim {
        padding: spacing-vertical(x-small);

        .alert-message {
            padding: spacing-vertical(small) spacing-horizontal(base);
            font-size: font-size(small);

            .copy {
                margin-bottom: 0;
            }
        }
    }

    &.alert-tiny {
        padding: spacing-vertical(x-small);

        .alert-message {
            padding: spacing-vertical(x-small) spacing-horizontal(small);
            font-size: font-size(small);

            .copy {
                margin-bottom: 0;

                .icon {
                    display: inline-block;
                    margin-right: $baseline;
                }
            }
        }
    }
}

.alert-icon {
    // hide icons on small screens
    display: none;

    @media(min-width: $bp-screen-md) {
        @include float(left);
        display: block;

        // create a circle around the icon
        border-radius: 50%;

        // create room around the icon for the circle
        padding: spacing-vertical(x-small);
    }
}

.alert-message-with-action {
    // provide room for the action to be displayed next to the alert message
    @include alert-message(70%);
}

.alert-message {
    @include alert-message(90%);
}

.alert-title {
    @extend %hd-5;
    @extend %headings-emphasized;

    @media(min-width: $bp-screen-md) {
         // shift the section up to make the alert more compact
         margin-top: - spacing-vertical(x-small);
    }

}

.alert-copy {
    @extend %copy-base;

    @media(min-width: $bp-screen-md) {
         // shift the message down to be in line with the icon
         margin-top: spacing-vertical(xx-small);
    }
}

.alert-copy-with-title {
    @extend %copy-base;
}

.alert-action {
    width: 100%;

    @media(min-width: $bp-screen-md) {
        @include float(right);
        width: inherit;
    }
}

// ----------------------------
// #INDIVIDUAL CASES
// ----------------------------

// information-based alert
.alert-information {
    @include alert(palette(information, accent), palette(information, back));
}

// warning-based alert
.alert-warning {
    @include alert(palette(warning, accent), palette(warning, back));
}

// error-based alert
.alert-error {
    @include alert(palette(error, accent), palette(error, back));
}

// success-based alert
.alert-success {
    @include alert(palette(success, accent), palette(success, back));
}