$card-container-box-shadow: 0 2px 8px 0 rgb(var(--black-rgb) / $transparency-4);
$card-hover-box-shadow: -5px 0 5px var(--deprecated-light-grey);

// Status Cards
$status-card-border-width: 4px;
$status-card-margin: 10px;
$status-card-small-width: 160px;

.card-content-box-shadow {
    box-shadow: $card-container-box-shadow;
}

.card-hover-box-shadow:hover {
    box-shadow: $card-hover-box-shadow;
}

.card {
    --border-radius: 8px;

    background-color: var(--white);
    border: $default-border;
    border-radius: var(--border-radius);
    box-shadow: var(--low-elevation-on-light);
}

.status-card {
    position: relative;
    background: var(--white);
    border-left: $status-card-border-width solid transparent;
    border-radius: $border-radius;
    box-shadow: $table-shadow;

    &.simple {
        background: transparent;
        box-shadow: none;
    }

    &:not(.loading) {
        &.mod-success {
            border-left-color: var(--success-60);
        }

        &.mod-warning {
            border-left-color: var(--warning-70);
        }

        &.mod-critical {
            border-left-color: var(--critical-70);
        }

        &.mod-information {
            border-left-color: var(--info-60);
        }
    }
}

.status-card-wrapper {
    display: flex;
    flex-wrap: wrap;

    .status-card {
        width: calc((100% - #{$status-card-margin} * 3) / 4);
        margin-right: $status-card-margin;
        margin-bottom: $status-card-margin;

        &:nth-child(4n) {
            margin-right: 0;
        }

        &:global(.simple) {
            width: $status-card-small-width;
        }
    }
}