:root {
    --card-background-color: hsl(204, 83%, 54%);
    --card-name-background-color: -moz-Dialog;

    @media all and not (-moz-windows-classic) { 
        &:not([echelon-system-style="winxp"])[echelon-appearance-blue],
        & .card-container[hardcode-blue] .content {
            --card-name-background-color: hsl(210, 55%, 92%);
        }
    }
}

.card-container {
	display: grid;

    .card {
        appearance: none;
        width: 100%;
        height: 122px;
        display: flex;
        padding: 0;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
        box-shadow: 0 0 4px rgba(8, 22, 37, 0.1), 0 0 10px rgba(8, 22, 37, 0);
        transition-property: background-image, border-color, box-shadow !important;
        transition-duration: 250ms !important;
    
        &::before {
            content: '';
            inset: 0;
            position: absolute;
            border: 1px solid;
            border-block-start-color: rgba(23, 51, 78, 0.15);
            border-block-end-color: rgba(23, 51, 78, 0.20);
            border-inline-color: rgba(23, 51, 78, 0.17);
            border-radius: inherit;
            box-shadow: inset 0 0 1px 0 rgba(8, 22, 37, 0), inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
            pointer-events: none;
            z-index: 1;
            transition-property: background-image, border-color, box-shadow !important;
            transition-duration: 250ms !important;
        }
    
        .card-content {
            width: 100%;
            height: 100%;
            appearance: none;
            padding: 0;
            margin: 0;
            background-color: var(--card-background-color);
            background-image: url("chrome://userchrome/content/windows/wizard/assets/bgnoise.png"), url("chrome://userchrome/content/windows/wizard/assets/bggrid.png"), radial-gradient(402% 100% at 50% 0%, #4792C9 0%, #285783 100%);
            border-radius: inherit;
            flex-direction: column;
            align-items: stretch;
            overflow: hidden;
    
            .checked {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 4px;
                left: 5px;
                background-image: url("chrome://userchrome/content/framework/apathum/images/card/card-checked.png");
                opacity: 0;
            
                transition-property: opacity !important;
                transition-duration: 250ms !important;
            }
    
            .year {
                top: 6px;
                right: 8px;
                position: absolute;
                padding: 1px 4px 2px;
                box-sizing: border-box;
                background-image: linear-gradient(180deg, #6A7580 0%, #4F5760 100%);
                box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 1px 4px rgba(0, 0, 0, 0.5), 0px 0px 2px rgba(0, 0, 0, 0.25);
                border-radius: 2px;
                border: 1px solid #E7E7E7;
                color: #E7E7E7;
                line-height: 9px;
                font-weight: bold;
                font-size: 8pt;
                text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
            }
    
            .content {
                display: flex;
                align-items: center;
                padding: 4px 10px 5px;
                height: 20px;
                background-color: var(--card-name-background-color);
                background-image: linear-gradient(to bottom, hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
                color: #1F364C;
                font-weight: bold;
                font-size: 8pt;
                text-transform: uppercase;
                transition-property: border-color !important;
                transition-duration: 250ms !important;
    
                label {
                    margin: 0;
                    cursor: inherit;                 
                }
            }
        }
    
        &:hover {
            box-shadow: 0 0 4px rgba(8, 22, 37, 0), 0 0 10px rgba(8, 22, 37, 0.3);
    
            .card-content {
                background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)), url("chrome://userchrome/content/windows/wizard/assets/bgnoise.png"), url("chrome://userchrome/content/windows/wizard/assets/bggrid.png"), radial-gradient(402% 100% at 50% 0%, #4792C9 0%, #285783 100%);
                border-color: rgba(8, 22, 37, .25) rgba(8, 22, 37, .27) rgba(8, 22, 37, .3);
            }
    
            &::before {
                box-shadow: inset 0 0 1px 0 rgba(8, 22, 37, 0), inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
            }
    
            &:active {
                box-shadow: 0 1px 0 white;
                transition-duration: 0ms;
    
                &::before {
                    box-shadow: inset 0 0 1px 0 rgba(8, 22, 37, .5), inset 0 1px 0 rgba(255, 255, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
                    transition-duration: 0ms;
                }
    
                .card-content {
                    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("chrome://userchrome/content/windows/wizard/assets/bgnoise.png"), url("chrome://userchrome/content/windows/wizard/assets/bggrid.png"), radial-gradient(402% 100% at 50% 0%, #4792C9 0%, #285783 100%);
                }
            }
        }
    
        &:hover .card-content .checked,
        .card-content[selected] .checked {
            opacity: 1;
        }
    
        &:hover .card-wrapper {
            &[selected] .checked {
                background-position-x: -20px;
            }
    
            .checked {
                background-position-x: -60px;
            }
        }
    
        &:hover {
            .card-content {
                .checked {
                    background-position-x: -60px;
    
                }
    
                &[selected] {
                    .checked {
                        background-position-x: -20px;
                    }
                }
            }
    
            &:active .card-content {
                .checked {
                    background-position-x: -80px;
                }
        
                &[selected] {
                    .checked {
                        background-position-x: -40px;
                    }
                }
            }
        }
    
        .radio-container {
            position: absolute;
            inset: 0;
    
            radio {
                margin: 0;
                padding: 0;
            }
        }
    }
}