/* Label — gekleurde tags / badges */

.maf-label {
    display: inline-flex;
    align-items: center;
    gap: var(--maf-space-1);
    font-family: var(--maf-font-body);
    font-weight: var(--maf-font-weight-medium);
    border: 1px solid transparent;
    border-radius: var(--maf-radius-full);
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}

/* Maten */

.maf-label--sm {
    padding: 2px var(--maf-space-2);
    font-size: 0.6875rem;
}

.maf-label--md {
    padding: var(--maf-space-1) var(--maf-space-3);
    font-size: var(--maf-font-size-xs);
}

.maf-label--lg {
    padding: var(--maf-space-2) var(--maf-space-4);
    font-size: var(--maf-font-size-sm);
}

/* Icoon */

.maf-label__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.maf-label--sm .maf-label__icon {
    width: 12px;
    height: 12px;
}

.maf-label--sm .maf-label__icon svg {
    width: 12px;
    height: 12px;
}

.maf-label--md .maf-label__icon {
    width: 14px;
    height: 14px;
}

.maf-label--md .maf-label__icon svg {
    width: 14px;
    height: 14px;
}

.maf-label--lg .maf-label__icon {
    width: 16px;
    height: 16px;
}

.maf-label--lg .maf-label__icon svg {
    width: 16px;
    height: 16px;
}

/* Tekst */

.maf-label__text {
    line-height: 1.3;
}

/* Verwijderknop */

.maf-label__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.7;
    transition:
        opacity var(--maf-duration-fast) var(--maf-easing-standard),
        background-color var(--maf-duration-fast) var(--maf-easing-standard);
}

.maf-label__remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.maf-label--sm .maf-label__remove {
    width: 14px;
    height: 14px;
}

.maf-label--sm .maf-label__remove svg {
    width: 10px;
    height: 10px;
}

.maf-label--md .maf-label__remove {
    width: 16px;
    height: 16px;
}

.maf-label--md .maf-label__remove svg {
    width: 12px;
    height: 12px;
}

.maf-label--lg .maf-label__remove {
    width: 20px;
    height: 20px;
}

.maf-label--lg .maf-label__remove svg {
    width: 14px;
    height: 14px;
}

/* Kleurvarianten — MijnAansluiting huisstijl kleurenpalet */

.maf-label--magenta {
    background-color: rgba(190, 44, 130, 0.12);
    color: #982370;
    border-color: rgba(190, 44, 130, 0.3);
}

.maf-label--cyaan {
    background-color: rgba(27, 181, 213, 0.12);
    color: #0e8fa6;
    border-color: rgba(27, 181, 213, 0.3);
}

.maf-label--groen {
    background-color: rgba(17, 153, 113, 0.12);
    color: #0d7a5a;
    border-color: rgba(17, 153, 113, 0.3);
}

.maf-label--blauw {
    background-color: rgba(26, 77, 153, 0.12);
    color: #1a4d99;
    border-color: rgba(26, 77, 153, 0.3);
}

.maf-label--navy {
    background-color: rgba(45, 63, 88, 0.12);
    color: #2d3f58;
    border-color: rgba(45, 63, 88, 0.3);
}

.maf-label--neutraal {
    background-color: var(--maf-grey-100);
    color: var(--maf-grey-700);
    border-color: var(--maf-grey-300);
}