/* ============================================================================
   06-COMPONENTS -> #ALERT
   ========================================================================= */

/**
 * Informs the user of important changes in a prominent way.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Alert
 */

.alert {
    --alert-bg: transparent;
    --alert-border-color: transparent;
    --alert-border-radius: var(--rounded-sm);
    --alert-border-width: var(--border-width);
    --alert-color: inherit;
    --alert-dismiss-size: var(--space-5);
    --alert-icon-color: inherit;
    --alert-padding: var(--space-4);

    @include transition(('opacity', 'transform'));
    align-items: flex-start;
    background-color: var(--alert-bg);
    border: var(--alert-border-width) solid var(--alert-border-color);
    border-radius: var(--alert-border-radius);
    color: var(--alert-color);
    display: flex;
    flex-direction: column;
    padding: var(--alert-padding);
    position: relative;
    width: 100%;
    
    @include media-breakpoint-up('md') {
        min-height: var(--space-14);
    }
    
    @include media-breakpoint-up('lg') {
        flex-direction: row;
    }
}


/**
 * Alert icon
 */

.alert__icon {
    color: var(--alert-icon-color);
    display: flex;
    position: relative;
}


/**
 * Alert content
 *
 * 1. Set 'margin-top' value on all children the alert content.
 * 2. Remove any potential margin that will unnecessarily increase the size of
 *    the alert component.
 */

.alert__content {
    display: flex;
    flex-direction: column;
    padding-top: var(--alert-padding);

    & > * + * {
        margin-top: var(--space-2); // [1]
    }

    & > :last-child {
        margin-bottom: 0; // [2]
    }

    @include media-breakpoint-up('lg') {
        padding-left: var(--alert-padding);
        padding-top: 0;
    }
}


/**
 * Alert dismiss
 *
 * 1. Set the 'before' pseudo element to have a larger clickable area.
 */

.alert__dismiss {
    appearance: none;
    background-color: transparent;
    border: 0;
    color: var(--alert-color);
    cursor: pointer;
    display: flex;
    height: var(--alert-dismiss-size);
    padding: 0;
    position: absolute;
    right: var(--alert-padding);
    top: var(--alert-padding);
    width: var(--alert-dismiss-size);

    &::before {
        content: '';
        height: var(--space-11); // [1]
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: var(--space-11); // [1]
    }
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Error alert
 */

.alert[data-theme=error] {
    --alert-bg: var(--color-error-25);
    --alert-border-color: var(--color-error-300);
    --alert-color: var(--color-error-700);
    --alert-icon-color: var(--color-error-600);
}

    
/**
 * Modifier: Information alert
 */

.alert[data-theme=information] {
    --alert-bg: var(--color-primary-25);
    --alert-border-color: var(--color-primary-300);
    --alert-color: var(--color-primary-700);
    --alert-icon-color: var(--color-primary-600);
}


/**
 * Modifier: Success alert
 */

.alert[data-theme=success] {
    --alert-bg: var(--color-success-25);
    --alert-border-color: var(--color-success-600);
    --alert-color: var(--color-success-700);
    --alert-icon-color: var(--color-success-600);
}
    

/**
 * Modifier: Warning alert
 */

.alert[data-theme=warning] {
    --alert-bg: var(--color-warning-25);
    --alert-border-color: var(--color-warning-300);
    --alert-color: var(--color-warning-700);
    --alert-icon-color: var(--color-warning-600);
}


/**
 * Modifier: Fixed alert
 *
 * Fixes an alert to the bottom of the viewport.
 */

.alert[data-fixed=true] {
    bottom: var(--alert-padding);
    left: var(--alert-padding);
    position: fixed;
    right: var(--alert-padding);
    width: calc(100% - var(--space-8));
    z-index: var(--z-index-50);

    @include media-breakpoint-up('lg') {
        left: auto;
        max-width: 24rem;
    }
}