.cx-relation-field {
    position: relative;
}

.cx-relation-field-control {
    position: relative;
    min-width: 0;
}

.cx-relation-field-input {
    padding-inline-end: var(--cx-space-10);
}

.cx-relation-field-clear {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--cx-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cx-space-6);
    height: var(--cx-space-6);
    padding: 0;
    color: var(--cx-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--cx-radius-round);
    font: inherit;
    font-size: var(--cx-font-size-lg);
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

/* The clear button is rendered hidden while nothing is selected; its own display rule must not override the hidden attribute. */
.cx-relation-field-clear[hidden] {
    display: none;
}

.cx-relation-field-clear:hover {
    color: var(--cx-color-text);
    background: var(--cx-color-surface-muted);
}

.cx-relation-field-clear:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--cx-color-ring) 55%, transparent);
    outline-offset: 1px;
}

.cx-relation-field-dropdown {
    position: absolute;
    z-index: var(--cx-z-dropdown);
    inset-block-start: calc(100% + var(--cx-space-1));
    inset-inline: 0;
    max-height: min(40vh, 20rem);
    overflow-y: auto;
    color: var(--cx-color-text);
    background: var(--cx-color-surface);
    border: 1px solid var(--cx-color-border-strong);
    border-radius: var(--cx-radius-md);
    box-shadow: var(--cx-shadow-md);
}

.cx-relation-field-dropdown[hidden] {
    display: none;
}

.cx-relation-field-dropdown--above {
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--cx-space-1));
}

.cx-relation-field-status {
    padding: var(--cx-space-3);
    color: var(--cx-color-text-muted);
    font-size: var(--cx-font-size-sm);
}

.cx-relation-field-status:empty {
    display: none;
}

.cx-relation-field-option {
    padding: var(--cx-space-2) var(--cx-space-3);
    color: var(--cx-color-text);
    font-size: var(--cx-font-size-sm);
    cursor: pointer;
}

.cx-relation-field-option:hover,
.cx-relation-field-option--active {
    color: var(--cx-color-text);
    background: var(--cx-color-surface-muted);
}

.cx-relation-field-option--active {
    color: var(--cx-color-primary);
    background: var(--cx-color-primary-soft);
    font-weight: var(--cx-font-weight-medium);
}

.cx-relation-field--invalid .cx-relation-field-input,
.cx-relation-field:has([data-cx-relation-value].input-validation-error) .cx-relation-field-input {
    border-color: var(--cx-color-danger);
}

.cx-relation-field-input[readonly],
.cx-relation-field-input:disabled {
    padding-inline-end: var(--cx-space-3);
}

.cx-relation-field-input[readonly] + .cx-relation-field-clear,
.cx-relation-field-input:disabled + .cx-relation-field-clear {
    display: none;
}

/* "Kayda git": a small link at the right end of the box, left of the clear button when both are shown. */
.cx-relation-field-control--linked .cx-relation-field-input {
    padding-inline-end: calc(var(--cx-space-10) + var(--cx-space-6));
}
.cx-relation-field-open {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--cx-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cx-space-6);
    height: var(--cx-space-6);
    color: var(--cx-color-text-muted);
    border-radius: var(--cx-radius-round);
    transform: translateY(-50%);
}
.cx-relation-field-clear:not([hidden]) ~ .cx-relation-field-open {
    inset-inline-end: calc(var(--cx-space-2) + var(--cx-space-6));
}
.cx-relation-field-open[hidden] {
    display: none;
}
.cx-relation-field-open:hover {
    color: var(--cx-color-primary);
    background: var(--cx-color-primary-soft);
}
.cx-relation-field-open:focus-visible {
    outline: 2px solid var(--cx-color-primary);
    outline-offset: 1px;
}
/* corex-static-field showing a related record: the same link sits at the right end of the read-only box. */
.cx-field-control--static.cx-field-control--linked {
    position: relative;
    padding-inline-end: var(--cx-space-10);
}
/* corex-static-field with a status badge: box and badge on one row, the badge outside the box. */
.cx-static-field-value {
    display: flex;
    align-items: center;
    gap: var(--cx-space-2);
    min-width: 0;
}
.cx-static-field-value > .cx-field-control {
    flex: 1 1 auto;
    min-width: 0;
}
.cx-static-field-value > .cx-data-grid-badge {
    flex: none;
}
/* The "go to record" icon is in the Corex brand blue (the Arvo logo / primary button start color); the value text keeps the normal text color. */
.cx-relation-field-open {
    color: var(--cx-brand-start);
}
.cx-relation-field-open:hover {
    color: var(--cx-brand-start-hover);
}