@import url(/components.css);

.alert{
    border: 2px solid black;
    display: flex; 
     justify-content: center; 
     align-items: center;
    font-weight: bold;
    font-size:small;
    width:80vw;
    padding:0.5rem;
    max-width: 500px;
    color: var(--off-white-);
    background-color: var(--off-white-);

}

.alertvarientcontainer{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 1rem;

}

.documentationcontentheader{
    color: var(--primary-color);
}

.alertvarienttitle{
    color: var(--primary-color);
    font-size: 1.3rem;
}

.primary{
    color: var(--off-white-);
    background-color: var(--primary-color);
}

.error{
    background-color: var(--error-color);
}
.warning{
    background-color: var(--warning-color);
}
.success{
    background-color: var(--success-color);
}

.primary-outline{
    color: var(--primary-color);
    border-color: var(--primary-color);

}

.error-outline{
    color:var(--error-color);
    border-color: var(--error-color);
}

.warning-outline{
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.success-outline{
    color:var(--success-color);
    border-color: var(--success-color);
}

#component-alert{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    margin: 1rem;

}