$card-border: $gray-300;
$card-border-hover: $harness-blue-dark;
$card-border-radius: 3px;
$card-box-shadow: none;

$card-header-color: $gray-900;
$card-header-color-hover: $harness-blue-dark;

$card-body-color: $gray-600;
$card-body-font-size: 15px;
$card-body-font-weight: 400;
$card-body-line-height: 22px;

// card is a mixin that can be used to render an element as
// a card with default border, padding, etc.
@mixin card {
    background: $white;
    border-radius: 3px;
    border: 1px solid $gray-300;
    box-shadow: none;
    text-decoration: none !important;
    transition: border-color 0.25s linear;
}

// cards is a list that stores a grid of cards.
.content .cards {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 100%;
    margin-bottom: 24px;

    a, a:active, a:visited {
        @include card;

        display: grid;
        grid-template-rows: auto;
        grid-gap: 6px;
        padding: 16px;
        user-select: none;
        margin-top: $m-0;
    }

    a:hover {
        border-color: $harness-blue-dark;

        .name {
            color: $card-header-color-hover;
        }
    }

    .name {
        font-weight: 500;
        color: $card-header-color;
    }

    .desc {
        color: $card-body-color;
        font-size: $card-body-font-size;
        font-weight: $card-body-font-weight;
        line-height: $card-body-line-height;
    }
}

.cards.cards-with-icons {
    display: grid;
    grid-gap: 24px;
    grid-template-columns: 1fr;
    padding-bottom: $p-1;

    img {
        border: none;
        margin: $m-0;
        grid-column: 1;
        grid-row: 1;
        width: 30px;
        height: 30px;
    }

    .icon {
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .name {
        flex: 1 1 auto;
        font-size: $text-base;
        padding-top: $p-1;
        grid-column: 2;
        grid-row: 1;
    }

    .desc {
        grid-column: 2;
        grid-row: 2;
    }

    a, a:visited, a:active {
        display: grid;
        grid-template-columns: 34px 1fr;
        grid-template-rows: 34px 1fr;
        grid-column-gap: 12px;
        grid-row-gap: 0px;
    }

    a:hover {
        border-color: $harness-blue-dark;
        cursor: pointer;
    }
}

// reference to a document in the same site. this is displayed
// as a card in the contents section.
.content .reference {
    @include card;

    display: flex;
    margin: $m-6 $m-0;
    padding: $p-4;
    user-select: none;

    .name {
        color: $card-header-color-hover;
        flex: 1 1 auto;
        font-size: $text-base;
    }

    .icon {
        margin-right: $m-4;
        background: url("/icons/arrow-right.svg") no-repeat center center;
        width: 24px;
    }

    &:hover {
        border-color: $harness-blue-dark;
    }
}
