// From bootstrap v3.4.1
// npm install -g lessc
// lessc _alert.scss _alert.css

@use "sass:color";
@use "sass:math";
@use "variables.scss";


//
// Alerts
// --------------------------------------------------

//## Define alert colors, border radius, and padding.
variables.$font-size-base:          14px;
//** Unit-less `line-height` for use in components like buttons.
variables.$line-height-base:        1.428571429; // 20/14
variables.$line-height-computed:    math.floor((variables.$font-size-base * variables.$line-height-base)); // ~20px

$state-success-text:             #3c763d;
$state-success-bg:               #dff0d8;
$state-success-border:           color.adjust(color.adjust($state-success-bg, $hue: -10), $lightness: -5%);

$state-info-text:                #31708f;
$state-info-bg:                  #d9edf7;
$state-info-border:              color.adjust(color.adjust($state-info-bg, $hue: -10), $lightness: -7%);

$state-warning-text:             #8a6d3b;
$state-warning-bg:               #fcf8e3;
$state-warning-border:           color.adjust(color.adjust($state-warning-bg, $hue: -10), $lightness: -5%);

$state-danger-text:              #a94442;
$state-danger-bg:                #f2dede;
$state-danger-border:            color.adjust(color.adjust($state-danger-bg, $hue: -10), $lightness: -5%);


$alert-padding: 15px;
$alert-border-radius: variables.$border-radius-base;
$alert-link-font-weight: bold;

$alert-success-bg: $state-success-bg;
$alert-success-text: $state-success-text;
$alert-success-border: $state-success-border;

$alert-info-bg: $state-info-bg;
$alert-info-text: $state-info-text;
$alert-info-border: $state-info-border;

$alert-warning-bg: $state-warning-bg;
$alert-warning-text: $state-warning-text;
$alert-warning-border: $state-warning-border;

$alert-danger-bg: $state-danger-bg;
$alert-danger-text: $state-danger-text;
$alert-danger-border: $state-danger-border;

variables.$border-radius-base:        4px;

// Alerts

@mixin alert-variant($background, $border, $text-color) {
    color: $text-color;
    background-color: $background;
    border-color: $border;

    hr {
        border-top-color: color.adjust($border, $lightness: -5%);
    }

    // .alert-link {
    //     color: darken($text-color, 10%);
    // }
}


// Base styles
// -------------------------

.#{variables.$prefix}alert {
    padding: $alert-padding;
    margin-bottom: variables.$line-height-computed;
    border: 1px solid transparent;
    border-radius: $alert-border-radius;

    // Headings for larger alerts
    h4 {
        margin-top: 0;
        color: inherit; // Specified for the h4 to prevent conflicts of changing $headings-color
    }

    // Provide class for links that match alerts
    // .alert-link {
    //     font-weight: $alert-link-font-weight;
    // }

    // Improve alignment and spacing of inner content
    >p,
    >ul {
        margin-bottom: 0;
    }

    >p+p {
        margin-top: 5px;
    }
}

// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

// The misspelled .alert-dismissable was deprecated in 3.2.0.
.#{variables.$prefix}alert-dismissable,
.#{variables.$prefix}alert-dismissible {
    padding-right: ($alert-padding + 20);

    // Adjust close link position
    .#{variables.$prefix}close {
        position: relative;
        top: -2px;
        right: -21px;
        color: inherit;
    }
}

// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

.#{variables.$prefix}alert-success {
    @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}

.#{variables.$prefix}alert-info {
    @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}

.#{variables.$prefix}alert-warning {
    @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}

.#{variables.$prefix}alert-danger {
    @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}