.select2-results__option[data-color],
.select2-results__option[data-image] {
    display: flex;
    align-items: center;
    gap: 1ch;
}

.select2-results__option[data-color]::before {
    content: ' ';
    position: relative;
    display: inline-block;
    height: 1lh;
    aspect-ratio: 1 / 1;
    background-color: attr(data-color type(<color>));
    border-radius: 2px;
}

.select2-results__option[data-image]::before {
    content: ' ';
    position: relative;
    display: inline-block;
    height: 1lh;
    aspect-ratio: 1 / 1;
    border-radius: 2px;

    background-image: var(--image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.select2-selection__choice[data-color],
.select2-selection__choice[data-image] {
    transform: translateY(6px);
}

.select2-selection__choice[data-color] .select2-selection__choice__display,
.select2-selection__choice[data-image] .select2-selection__choice__display {
    display: inline-flex;
    align-items: center;
    gap: 1ch;
    padding: 0.5ch 1ch;
}

.select2-selection__choice[data-color] {
    --color: attr(data-color type(<color>));
}

.select2-selection__choice[data-color] .select2-selection__choice__display::before {
    content: ' ';
    position: relative;
    height: 1lh;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background-color: var(--color);
}

.select2-selection__choice[data-image] .select2-selection__choice__display::before {
    content: ' ';
    position: relative;
    display: inline-block;
    height: 1lh;
    aspect-ratio: 1 / 1;
    border-radius: 2px;

    background-image: var(--image-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.select2-selection__rendered:has(.select2-selection__choice[data-color]),
.select2-selection__rendered:has(.select2-selection__choice[data-image]) {
    transform: translateY(-2px);
}

.select2-selection__rendered:has(.select2-selection__choice[data-color]) .select2-selection__choice,
.select2-selection__rendered:has(.select2-selection__choice[data-image]) .select2-selection__choice {
    height: 28px;
}

.select2-selection__choice[data-color] .select2-selection__choice__display::before {
    border: 1px solid #F1F1F4;
}