/*
 * Citizen - Related Articles Styles
 * https://starcitizen.tools
*/

@import '../resources/variables.less';
@import '../resources/mixins.less';

.ext-related-articles-card-list {
    margin-top: 0;
    padding-top: @content-margin-top; // Give room for shadows and translate
    overflow: visible; // Show shadow

    .ext-related-articles-card {
        border: 1px solid @base-80  !important;
        border-radius: 0 !important;
        .boxshadow(1);
        transition: @transition-transform-quick;

        &:hover {
            .boxshadow(3);
            transform: translateY(-2px);
        }

        >a:hover {
            box-shadow: none;
        }
    }
}

.ext-related-articles-card-extract:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10%;
    height: 1em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

@media (prefers-color-scheme: dark) {
    .ext-related-articles-card-list {
        .ext-related-articles-card {
            border-color: @dark-bg-40  !important;
            background-color: @dark-bg-30;
        }

        .ext-related-articles-card-thumb {
            background-color: @dark-bg-10;
        }

        h3 {
            &:after {
                background: linear-gradient(to right, rgba(255, 255, 255, 0), @dark-bg-30 50%);
            }

            a {
                color: @dark-text-100;
            }
        }
    }

    .ext-related-articles-card-extract:after {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), @dark-bg-30 50%);
    }
}