/*
=============
=== BOXES ===
=============
*/

.box {
    background-color: var(--box-bg);
    box-sizing: border-box;
    box-shadow: var(--box-shadow);
    padding: var(--spacing-md);
    margin: auto;
    width: 100%;

    &.accent {
        border: 1px solid var(--color-accent) !important;
    }

    &.info {
        border: 1px solid var(--color-info) !important;
    }

    &.success {
        border: 1px solid var(--color-success) !important;
    }

    &.warning {
        border: 1px solid var(--color-warning) !important;
    }

    &.error {
        border: 1px solid var(--color-error) !important;
    }
}

.flag-box {
    background-color: var(--box-bg);
    box-sizing: border-box;
    border-left: 4px solid;
    box-shadow: var(--box-shadow);
    padding: var(--spacing-md);
    margin: auto;
    width: 100%;

    &.accent {
        border-color: var(--color-accent);
        box-shadow: 0 0 1px var(--color-accent-shadow), var(--box-shadow-ext);
    }

    &.info {
        border-color: var(--color-info);
        box-shadow: 0 0 1px var(--color-info-shadow), var(--box-shadow-ext);
    }

    &.success {
        border-color: var(--color-success);
        box-shadow: 0 0 1px var(--color-success-shadow), var(--box-shadow-ext);
    }

    &.warning {
        border-color: var(--color-warning);
        box-shadow: 0 0 1px var(--color-warning-shadow), var(--box-shadow-ext);
    }

    &.error {
        border-color: var(--color-error);
        box-shadow: 0 0 1px var(--color-error-shadow), var(--box-shadow-ext);
    }
}

.icon-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
    gap: 10px;

    >div:nth-child(1) {
        flex: 0 0;
        width: 40px;
        height: 40px;
    }

    >div:nth-child(2) {
        flex: 1 1;
        width: 100%;
    }
}