.thread-item {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--c--globals--spacings--3xs) var(--c--globals--spacings--4xs);
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid transparent;

    & > div:first-child {
        padding-top: 0.42rem;
        padding-inline: var(--c--globals--spacings--2xs);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--c--globals--spacings--3xs);
    }

    & > div:last-child {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
}

.thread-item:not(.thread-item--active):hover,
.thread-item:not(.thread-item--active):focus {
    background-color: var(--c--contextuals--background--semantic--neutral--tertiary);
    border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
}

// Keyboard focus ring, drawn inward so the scroll container does not clip
// it. Outline does not conflict with the state backgrounds, so it stays
// visible on selected and active rows too.
.thread-item:focus-visible {
    outline: 2px solid var(--c--contextuals--border--focus);
    outline-offset: -2px;
}

.thread-item.thread-item--active {
    background-color: var(--c--contextuals--background--semantic--brand--tertiary);
    border-color: var(--c--contextuals--border--semantic--brand--tertiary);
}

.thread-item.thread-item--selected {
    background-color: var(--c--contextuals--background--semantic--brand--secondary);
    border-color: var(--c--contextuals--border--semantic--brand--secondary);
}

.thread-item.thread-item--selected:not(.thread-item--active):hover,
.thread-item.thread-item--selected:not(.thread-item--active):focus {
    background-color: var(--c--contextuals--background--semantic--brand--secondary);
    border-color: var(--c--contextuals--border--semantic--brand--secondary);
}

.thread-item.thread-item--dragging {
    background-color: var(--c--contextuals--background--semantic--brand--tertiary) !important;
    color: var(--c--contextuals--content--semantic--brand--primary);
    border-color: var(--c--contextuals--border--semantic--brand--tertiary) !important;
    border-style: dashed;
}

.thread-item__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &.thread-item__row--subject {
        align-items: center;
        height: 1.125rem;
    }
}

.thread-item__column {
    display: flex;
    flex-direction: row;
}

.thread-item__thread-details {
    min-width: 0;
    flex: 1;
}

// This wrapper carries aria-hidden="true", so it must stay a real box in the
// layout. `display: contents` is handled inconsistently across browser/AT
// combinations and can drop the aria-hidden boundary, leaking the checkbox
// semantics into the parent role="option". inline-flex shrink-wraps the
// checkbox so the visual layout stays identical.
.thread-item__checkbox-wrapper {
    display: inline-flex;
    flex-shrink: 0;
    // The checkbox is presentational only; let clicks reach the Link so
    // handleItemClick handles selection (and the checkbox stays in sync via
    // its `checked` prop instead of fighting the click's preventDefault).
    pointer-events: none;
}

.thread-item__checkbox {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    --c--components--forms-checkbox--size: 1rem;
    transform: translate(-3px, -30%);
    & svg {
        width: var(--c--components--forms-checkbox--size);
        height: var(--c--components--forms-checkbox--size);
    }
}

.thread-item__read-indicator {
    --size: 0.5rem;
    flex-shrink: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    box-sizing: border-box;
    background-color: transparent;
    border: 0.5px solid transparent;
}

.thread-item[data-unread="true"] .thread-item__read-indicator {
    background-color: var(--c--contextuals--background--semantic--brand--primary);
    border-color: var(--c--contextuals--border--semantic--contextual--primary);
}

.thread-item__content {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--base);
    align-items: center;
    margin-top: var(--c--globals--spacings--2xs);
    min-width: 0;
}

.thread-item__column:has(.thread-item__subject),
.thread-item__column:has(.thread-item__sender) {
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.thread-item__subject {
    font-size: var(--c--globals--font--sizes--xs);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.thread-item__column--metadata {
    align-items: center;
    gap: var(--c--globals--spacings--3xs);
}

.thread-item__label-bullets {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--3xs);
    margin-right: var(--c--globals--spacings--xs);
    align-items: center;
}

.thread-item__label-bullet {
    min-width: 0.7rem;
    height: 0.7rem;
    font-size: 0.55rem;
    line-height: 1.2;
    text-align: center;
    font-weight: 700;
    color: var(--c--contextuals--content--semantic--brand--on-brand);
    background-color: var(--c--contextuals--background--semantic--brand--primary);
    border: 1px solid var(--c--contextuals--border--semantic--contextual--primary);
    border-radius: 2px;
    box-sizing: border-box;
    padding-inline: var(--c--globals--spacings--4xs);
}

.thread-item__sender {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    font-size: var(--c--globals--font--sizes--sm);
}

.thread-item[data-unread="true"] .thread-item__sender {
    font-weight: 700;
}

.thread-item__date {
    white-space: nowrap;
    text-align: right;
    font-size: var(--c--globals--font--sizes--xs);
    color: var(--c--contextuals--content--semantic--neutral--secondary)
}

.thread-item__column--badges {
    gap: var(--c--globals--spacings--4xs);
    font-size: var(--c--globals--font--sizes--t);
    align-items: center;
}

.thread-item__labels {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 1;
    gap: var(--c--globals--spacings--2xs);
    min-width: 0;
    overflow: hidden;
}

.thread-item__labels .badge {
    flex-shrink: 1;
    min-width: 20px;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// Drag preview styles
.thread-drag-preview {
    position: fixed;
    top: 0;
    left: -100px;
    z-index: 100000;
    background: var(--c--contextuals--background--semantic--brand--primary);
    background: color-mix(in srgb, var(--c--contextuals--background--semantic--brand--primary) 90%, transparent);
    backdrop-filter: blur(6px);
    color: var(--c--contextuals--content--semantic--brand--on-brand);
    border-radius: 50vw;
    border: 1px solid var(--c--contextuals--border--semantic--brand--primary);
    font-size: var(--c--globals--font--sizes--xs);
    line-height: 1;
    box-shadow: none;
    font-weight: 700;
    padding: var(--c--globals--spacings--xs) var(--c--globals--spacings--sm);
    white-space: nowrap;
    pointer-events: none;
    cursor: grabbing;
    animation: popIn 0.15s var(--c--globals--transitions--ease-in-out);
    transform-origin: left center;
}

.thread-drag-preview--exiting {
    animation: popOut 0.15s var(--c--globals--transitions--ease-in-out) forwards;
}

@keyframes popIn {
    0% {
        scale: 0.7;
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        scale: 1;
        opacity: 1;
    }
}

@keyframes popOut {
    0% {
        scale: 1;
        opacity: 1;
    }
    100% {
        scale: 0.7;
        opacity: 0;
    }
}
