.po-text-color-picker, .po-text-color-popover {
    box-sizing: border-box; color: #30352f; font: 400 12px/1.4 'Space Grotesk', sans-serif; letter-spacing: 0;
}
.po-text-color-picker { display: grid; gap: 8px; min-width: 0; }
#project-overlay .po-inline-color-toolbar { display: grid; margin: 0 0 10px; padding: 10px; border: 1px solid #d8d8d3; border-radius: 5px; background: #f5f5f2; }
.po-text-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.po-text-color-row > span { font-weight: 600; }
.po-text-color-picker .po-text-color-row > input {
    box-sizing: border-box; min-width: 0; height: 34px; margin: 0; border: 1px solid #cdd5d1; border-radius: 4px; background: #fff; color: #20201e; font: inherit;
}
.po-text-color-picker .po-text-color-row > input[type="color"] { flex: 0 0 38px; width: 38px; padding: 3px; cursor: pointer; }
.po-text-color-picker .po-text-color-row > input[type="text"] { flex: 0 1 100px; width: 100px; padding: 6px 8px; text-transform: uppercase; }
.po-text-color-picker .po-text-color-row > input[aria-invalid="true"] { border-color: #ac3131; }
.po-text-color-picker button.po-inline-color-apply {
    width: auto; min-height: 34px; padding: 6px 10px; border: 1px solid #cdd5d1; border-radius: 4px; background: #fff; color: #20201e; font: 600 12px/1.4 'Space Grotesk', sans-serif; cursor: pointer;
}
.po-text-color-recents { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.po-text-color-recents[hidden] { display: none; }
.po-text-color-recents > span { margin-right: 2px; color: #64645e; font-size: 11px; }
.po-text-color-picker button.po-text-color-swatch {
    box-sizing: border-box; width: 26px; min-height: 26px; height: 26px; flex: 0 0 26px; padding: 0; border: 1px solid #b8bcb8; border-radius: 4px; cursor: pointer;
}
.po-text-color-picker button.po-text-color-swatch[aria-pressed="true"] { outline: 2px solid #30352f; outline-offset: 1px; }
.po-text-color-picker :is(button,input):focus-visible { outline: 2px solid #176b87; outline-offset: 2px; }
.po-text-color-status { color: #ac3131; overflow-wrap: anywhere; font-size: 12px; }
.po-text-color-status:empty { display: none; }
.po-text-color-popover {
    position: fixed; inset: auto; margin: 0; width: min(350px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto;
    padding: 12px; border: 1px solid #cdd5d1; border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}
.po-text-color-popover > .po-text-color-close {
    display: grid; place-items: center; width: 28px; min-height: 28px; height: 28px; margin: 0 0 8px auto; padding: 4px;
    border: 0; border-radius: 4px; background: transparent; color: #30352f; cursor: pointer;
}
.po-text-color-close .po-content-icon { width: 18px; height: 18px; font-size: 18px; }
.uxe button.uxe-inline-colour {
    position: absolute; top: -2px; right: 0; width: 26px; min-height: 20px; height: 20px; padding: 3px;
    border: 1px solid #cdd5d1; border-radius: 4px; background: #fff; cursor: pointer;
}
.uxe button.uxe-inline-colour::before { display: block; width: 100%; height: 100%; background: var(--text-color); content: ''; }