.de-leading-icon {
    --de-leading-icon-size: 0.9em;
    --de-leading-icon-gap: 0.3em;
    position: relative;
}

.de-leading-icon::before {
    /* Keep the icon in the first line and prevent a break before its text. */
    content: "\2060";
    padding-inline-start: calc(var(--de-leading-icon-available, 0) * var(--de-leading-icon-size));
    margin-inline-end: calc(var(--de-leading-icon-available, 0) * var(--de-leading-icon-gap));
}

.de-leading-icon::after {
    /* Safari needs the mask on a box, separate from the inline word joiner. */
    content: "";
    position: absolute;
    inset-inline-start: 0;
    /* Match the first line's font box, independent of wrapping or line spacing. */
    line-height: normal;
    top: 0.5lh;
    transform: translateY(-50%);
    width: calc(var(--de-leading-icon-available, 0) * var(--de-leading-icon-size));
    height: var(--de-leading-icon-size);
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask: var(--de-leading-icon, linear-gradient(transparent, transparent)) center / var(--de-leading-icon-size) var(--de-leading-icon-size) no-repeat;
    mask: var(--de-leading-icon, linear-gradient(transparent, transparent)) center / var(--de-leading-icon-size) var(--de-leading-icon-size) no-repeat;
}

.de-leading-icon-picker {
    box-sizing: border-box;
    width: 300px;
    max-width: calc(100vw - 32px);
    padding: 16px;
}

.de-leading-icon-picker__options {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.de-leading-icon-picker__option {
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
}

.de-leading-icon-picker__preview {
    height: var(--de-leading-icon-size);
    width: var(--de-leading-icon-size);
    flex-shrink: 0;
}

.de-leading-icon-picker__preview::before {
    content: none;
}

.de-leading-icon-picker__preview::after {
    top: 50%;
}

.de-leading-icon-picker__remove {
    margin-top: 12px;
}