@use "../../styles/bootstrap/functions";
@use "../../styles/bootstrap/functions-variables";
@use "../../styles/bootstrap/mixins/border-radius";
@use "../../styles/bootstrap/variables" as bootstrap-variables;
@use "../../styles/variables";
@use "mixin";

//
// Base styles
//

.thy-alert {
    display: flex;
    align-items: center;
    position: relative;
    padding: variables.$alert-padding-y variables.$alert-padding-x;
    border: bootstrap-variables.$alert-border-width solid transparent;
    @include border-radius.border-radius(bootstrap-variables.$alert-border-radius);

    &.thy-alert-naked {
        padding: 0;
        border: none;
    }

    &.thy-alert-hidden {
        display: none;
    }

    .thy-alert-content {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .thy-alert-operation {
        margin-left: variables.$alert-operation-margin-left;
        .thy-alert-action {
            margin: 0 10px;
            position: relative;
            &:first-child {
                margin: 0 10px 0 0;
            }
            &:last-child {
                margin: 0 0 0 10px;
            }
            &:not(:last-child):after {
                content: '';
                border-right: 1px solid variables.$gray-300;
                width: 10px;
                height: 13px;
                position: absolute;
                right: -12px;
                top: 2px;
            }
        }
    }

    .thy-alert-close {
        color: variables.$gray-400;
        &:hover {
            color: variables.$gray-600;
        }
    }
}

.thy-alert-icon {
    margin-right: variables.$alert-icon-margin-right;
}

// Headings for larger alerts
.thy-alert-heading {
    // Specified to prevent conflicts of changing $headings-color
    color: inherit;
}

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

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

.thy-alert-dismissible {
    padding-right: (variables.$close-font-size + variables.$alert-padding-x * 2);

    // Adjust close link position
    .close {
        position: absolute;
        top: 0;
        right: 0;
        padding: variables.$alert-padding-y variables.$alert-padding-x;
        color: inherit;
    }
}

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

@each $color, $value in functions-variables.$theme-colors {
    .thy-alert-fill-#{$color} {
        @include mixin.thy-alert-variant(functions.theme-color($color));
    }

    .thy-alert-bordered-#{$color} {
        @include mixin.thy-alert-bordered-variant(functions.theme-color($color));
    }

    .thy-alert-naked-#{$color} {
        @include mixin.thy-alert-naked-variant(functions.theme-color($color));
    }
}
