/* -------------------------------------------
    Alert
        - Default
        - Solid
        - Outline
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../../assets/sass/direction';

// Default
.alert {
    display: flex;
    position: relative;
    padding: 1.22em;
    color: var(--alpha-change-color-light-1);
    background-color: var(--alpha-traffic-white-color);
    font-size: 1.4rem;

    .btn-close {
        display: inline-block;
        position: absolute;
        top: 2.9rem;
        #{$right}: 1.7rem;
        line-height: 0;
        color: inherit;
        font-size: 1.07em;
        font-weight: 400;

        i {
            font-size: inherit;
        }
    }
}

//  Icon
.alert .alert-icon {
    margin-#{$right}: .365em;
    font-size: 1.57em;
    line-height: 1.3;
}

.alert-title {
    font-size: 1.15em;
}
.alert-desc {
    font-size: .93em;
}

.alert-default {
    color: var(--alpha-change-color-dark-1);
}
.alert-primary {
    color: var(--alpha-primary-color);
    background-color: var(--alpha-primary-color-light);
}
.alert-secondary {
    color: var(--alpha-secondary-color);
    background-color: var(--alpha-secondary-color-light);
}
.alert-dark {
    color: var(--alpha-dark-color);
    background-color: var(--alpha-dark-color-light);
}
.alert-accent {
    color: var(--alpha-accent-color);
    background-color: var(--alpha-accent-color-light);
}
.alert-success {
    color: var(--alpha-success-color);
    background-color: var(--alpha-success-color-light);
}
.alert-info {
    color: var(--alpha-info-color);
    background-color: var(--alpha-info-color-light);
}
.alert-warning {
    color: var(--alpha-alert-color);
    background-color: var(--alpha-alert-color-light);
}
.alert-danger {
    color: var(--alpha-danger-color);
    background-color: var(--alpha-danger-color-light);
}

// Color types
.alert-solid {
    color: #fff;

    &.alert-default {
        color: var(--alpha-change-color-dark-1);
    }
    &.alert-primary {
        background-color: var(--alpha-primary-color);
    }
    &.alert-secondary {
        background-color: var(--alpha-secondary-color);
    }
    &.alert-dark {
        background-color: var(--alpha-change-color-dark-1);
    }
    &.alert-accent {
        background-color: var(--alpha-accent-color);
    }
    &.alert-success {
        background-color: var(--alpha-success-color);
    }
    &.alert-info {
        background-color: var(--alpha-info-color);
    }
    &.alert-warning {
        background-color: var(--alpha-alert-color);
    }
    &.alert-danger {
        background-color: var(--alpha-danger-color);
    }
}

// Outline
.alert-outline {
    background-color: transparent;
    border: 1px solid;
    
    &.alert-default {
        color: var(--alpha-change-color-dark-1);
        border-color: var(--alpha-change-border-color);
    }
    &.alert-primary {
        color: var(--alpha-primary-color);
    }
    &.alert-secondary {
        color: var(--alpha-secondary-color);
    }
    &.alert-dark {
        color: var(--alpha-change-color-dark-1);
    }
    &.alert-accent {
        color: var(--alpha-accent-color);
    }
    &.alert-success {
        color: var(--alpha-success-color);
    }
    &.alert-info {
        color: var(--alpha-info-color);
    }
    &.alert-warning {
        color: var(--alpha-alert-color);
    }
    &.alert-danger {
        color: var(--alpha-danger-color);
    }
}
