:root {
    --nb-article-card-10-category-badge-padding-x: 4px;
    --nb-article-card-10-category-badge-padding-y: 2px;
    --nb-article-card-10-category-badge-color: var(--nb-color-white);
    --nb-article-card-10-category-badge-font-size: var(--nb-font-size-14);
    --nb-article-card-10-category-badge-font-weight: var(--nb-font-weight-400);
    --nb-article-card-10-category-badge-line-height: 23px;
    --nb-article-card-10-category-badge-border-radius: 0;

    --nb-cat-color: var(--nb-article-card-10-category-badge-bg-primary);
    --nb-article-card-10-category-badge-bg-primary: var(--nb-color-primary);
    --nb-article-card-10-subcategory-badge-bg-primary: var(--nb-color-primary-dark);

    --nb-article-card-10-name-color: var(--nb-text-color-primary);
    --nb-article-card-10-name-font-size: var(--nb-font-size-18);
    --nb-article-card-10-name-font-weight: var(--nb-font-weight-600);
    --nb-article-card-10-name-line-height: var(--nb-body-line-height);
    --nb-article-card-10-name-rows: 2;

    --nb-article-card-10-short-description-color: var(--nb-text-color-primary);
    --nb-article-card-10-short-description-font-size: var(--nb-font-size-16);
    --nb-article-card-10-short-description-font-weight: var(--nb-font-weight-400);
    --nb-article-card-10-short-description-line-height: 20px;
    --nb-article-card-10-short-description-rows: 5;

    --nb-article-card-10-link-color: var(--nb-text-color-primary);
    --nb-article-card-10-link-bg: var(--nb-color-white);
    --nb-article-card-10-link-font-size: var(--nb-font-size-14);
    --nb-article-card-10-link-font-weight: var(--nb-font-weight-400);
    --nb-article-card-10-link-min-width: 150px;
    --nb-article-card-10-link-padding-x: 0;
    --nb-article-card-10-link-padding-y: 8px;
    --nb-article-card-10-link-border-width: var(--nb-border-width);
    --nb-article-card-10-link-border-color: var(--nb-color-gray-900);
    --nb-article-card-10-link-border-radius: 8px;

    --nb-article-card-10-link-hover-color: var(--nb-color-white);
    --nb-article-card-10-link-hover-bg: var(--nb-color-gray-900);

    --nb-article-card-10-btn-color: var(--nb-spec-color);
    --nb-article-card-10-btn-font-size: var(--nb-font-size-14);
    --nb-article-card-10-btn-font-weight: var(--nb-font-weight-400);
}

.nb-article-card-10 {

    overflow: hidden;
    height: 100%;

    .nb-img-wrapper {

        .nb-img {
            width: 100%;
        }

    }

    .nb-card-body {

        > * + * {
            margin-top: 10px;
        }

        .nb-category-badge {

            display: inline-flex;
            overflow: hidden;
            border-radius: var(--nb-article-card-10-category-badge-border-radius);

            span {
                padding: var(--nb-article-card-10-category-badge-padding-y) var(--nb-article-card-10-category-badge-padding-x);
                color: var(--nb-article-card-10-category-badge-color);
                font-size: var(--nb-article-card-10-category-badge-font-size);
                font-weight: var(--nb-article-card-10-category-badge-font-weight);
                line-height: var(--nb-article-card-10-category-badge-line-height);
                display: inline-block;
                text-transform: uppercase;
            }

            .nb-category-name {
                position: relative;
                z-index: 1;
                background: var(--nb-article-card-10-category-badge-bg-primary);
            }

            .nb-category-name::after {
                content: "";
                position: absolute;
                top: 0;
                right: -8px;
                width: 0;
                height: 0;
                border-top: 14px solid transparent;
                border-bottom: 14px solid transparent;
                border-left: 8px solid var(--nb-cat-color);
                z-index: 2;
            }

            .nb-subcategory-name {
                padding-left: calc(var(--nb-article-card-10-category-badge-padding-x) + 10px);
                background: var(--nb-article-card-10-subcategory-badge-bg-primary);
            }
        }

        .nb-article-name {
            color: var(--nb-article-card-10-name-color);
            font-size: var(--nb-article-card-10-name-font-size);
            font-weight: var(--nb-article-card-10-name-font-weight);
            line-height: var(--nb-article-card-10-name-line-height);
            height: calc(var(--nb-article-card-10-name-rows) * var(--nb-article-card-10-name-line-height) * var(--nb-article-card-10-name-font-size));
        }

        .nb-article-short-description {
            color: var(--nb-article-card-10-short-description-color);
            font-size: var(--nb-article-card-10-short-description-font-size);
            font-weight: var(--nb-article-card-10-short-description-font-weight);
            line-height: var(--nb-article-card-10-short-description-line-height);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: var(--nb-article-card-10-short-description-rows);
            -webkit-box-orient: vertical;
            height: calc(var(--nb-article-card-10-short-description-line-height) * var(--nb-article-card-10-short-description-font-size) * var(--nb-article-card-10-short-description-rows));
        }
    }

    .nb-card-footer {

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
        background-color: var(--nb-color-white);
        border-top: unset;

        .nb-article-card-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: var(--nb-article-card-10-link-min-width);
            padding: var(--nb-article-card-10-link-padding-y) var(--nb-article-card-10-link-padding-x);
            border: var(--nb-article-card-10-link-border-width) var(--nb-border-style) var(--nb-article-card-10-link-border-color);
            -webkit-border-radius: var(--nb-article-card-10-link-border-radius);
            -moz-border-radius: var(--nb-article-card-10-link-border-radius);
            border-radius: var(--nb-article-card-10-link-border-radius);
            color: var(--nb-article-card-10-link-color);
            background-color: var(--nb-article-card-10-link-bg);
            font-size: var(--nb-article-card-10-link-font-size);
            font-weight: var(--nb-article-card-10-link-font-weight);

            &:hover,
            &:focus,
            &:active {
                color: var(--nb-article-card-10-link-hover-color);
                background-color: var(--nb-article-card-10-link-hover-bg);
            }
        }

        .nb-article-card-btn {
            color: var(--nb-article-card-10-btn-color);
            font-size: var(--nb-article-card-10-btn-font-size);
            font-weight: var(--nb-article-card-10-btn-font-weight);
        }

    }
}