.anchored-label {
    border: 1px;
    border-style: solid;
    border-radius: 4px;
    border-color: var(--indi-primary-colour);

    color: var(--indi-white);
    background-color: rgba(0,0,0,0.5);
    font-size: 12px;
    padding: 3px 6px 4px;

    display: flex;
    align-items: center;
}

.anchored-label .heading {
    color: var(--indi-primary-colour);
}

.anchored-label.single-row {
    flex-direction: row;
    gap: 6px;
}

.anchored-label.multiple-rows {
    flex-direction: column;
    width: 100%;
}

.anchored-label .item {
    white-space: nowrap;
}

.anchored-label .secondary {
    color: lightgrey;
}

.property-value {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: translateX(0);
}

.property-value.fade-out {
    opacity: 0;
    transform: translateX(20px);
}

.property-value.fade-in {
    animation: fadeInFromLeft 0.3s ease-in-out;
}

@keyframes fadeInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}