.comm-card {
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    height: 100%;
}

.comm-card:has(input:checked) {
    border-color: var(--etem-primary-light) !important;
    background-color: color-mix(in srgb, var(--etem-light-blue) 40%, transparent);
}

.comm-card:has(input:focus-visible) {
    outline: 3px solid var(--etem-primary-light);
    outline-offset: 2px;
  }

.comm-card img {
    width: 40px;
    height: 40px;
}

.selection-indicator {
    width: 24px;
    height: 24px;
    background-color: #FFFFFF !important;
    transition: border-color .2s ease;
}

/* Filled circle to improve Berierefreiheit and increase UX*/
.selection-indicator::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--etem-primary-light);
    border-radius: 50%;
    transform: scale(0);
    transition: transform .2s ease;
}

/* Filled circle animation*/
.comm-card input:checked + .card-content .selection-indicator::after {
    transform: scale(1);
}