@import "dependencies";

.willow-card {
    @include compact;

    border-radius: $component-card-border-radius;
    box-shadow: 1px 3px 10px $component-card-box-shadow-color;
    color: $component-card-text-color;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: $space-stack-l;
    overflow: hidden;
    text-decoration: none;

    @import "image";
    @import "content";
    @import "icon";
    @import "heading";
    @import "description";
    @import "actions";
    @import "action";
}

.willow-card[href] {
    transform: scale(1);
    transition: 0.2s transform;

    &:visited,
    &:hover,
    &:active {
        color: $component-card-text-color;
    }

    &:hover {
        transform: scale(1.01);
    }

    &:active {
        transform: scale(0.99);
    }
}