@use '../layout/flex';

$background: var(--background-tertiary);
$highlight: var(--primary-hover);

@mixin card {
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
    background-color: $background;
    border: 4px solid $background;

    min-width: 250px;

    padding: 32px;
    border-radius: 16px;

    color: var(--text);

    @include flex.column;

    align-self: stretch;
    flex-grow: 1;
    flex-shrink: 1;

    transition: border-color 0.2s ease-in-out;

    &:hover:not(&.no-hover),
    &:focus,
    &:active:not(&.no-hover) {
        border: 4px solid $highlight;
        background-color: $background;
    }
}

@mixin blue {
    $background: var(--primary);
    $highlight: var(--primary-hover);

    background-color: $background;
    border: 4px solid $background;

    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;

    &:hover:not(&.no-hover),
    &:focus,
    &:active {
        border-color: $background;
        background-color: $highlight;
    }
}

card,
.card {
    @include card;

    &.click {
        cursor: pointer;
    }

    &.blue {
        @include blue;
    }
}

a.card {
    cursor: pointer;
    color: var(--text);
}