.material-card {
    padding: 2 * $spacing;
    background-color: var(--white);
    border: 1px solid rgb(var(--deprecated-heather-rgb) / 30%);
    border-radius: $border-radius;
    box-shadow: $material-card-shadow;
    transition: box-shadow 0.1s ease-out;

    .color-bar-border {
        position: relative;
        bottom: 0;
        left: 0;
        line-height: $material-card-colored-border-height;

        .color-bar-color {
            &:first-child {
                border-bottom-left-radius: $border-radius;
            }

            &:last-child {
                border-bottom-right-radius: $border-radius;
            }
        }
    }
}

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

.material-card.with-active:active {
    box-shadow: $material-card-shadow-active;
}