/* =========== Alert =========== */
.alert {
    width: 95%;
    padding: var(--sp-1);
    margin: var(--sp-1);
    border-radius: 0.4rem;

    display: flex;
    align-items: center;
}

.alert .icon {
    /* font-size: var(--h3-font-size); */
    margin: var(--sp-0-5);
}

.alert .info {
    margin: 0 var(--sp-0-5);
}

.text-link {
    font-weight: var(--font-medium);
    color: var(--text-color);
}

.alert.secondary .text-link,
.alert.secondary {
    color: var(--default-color);
}

.example-container .alert.secondary {
    border: 1px solid var(--text-color-light);
}

.close-btn {
    font-weight: var(--font-medium);
    opacity: 0.5;
    color: var(--text-color);
    background-color: transparent;

    margin-left: auto;
    border: none;
    border-radius: 0.4rem;
}
.close-btn:hover {
    opacity: 1;
}

.reset-btn {
    width: 8rem;
    background-color: var(--primary-color);
    border: none;
    border-radius: 0.4rem;
    padding: var(--sp-0-5);
    margin: 1rem 0;

    display: flex;
    align-items: center;
    justify-content: center;
}