.TermsDetail {
    &-titleRow {
        display: flex;
        align-items: center;
        width: 100%;
    }

    &-title {
        flex: 1;
    }

    &-titleAction {
        margin-left: auto;
    }

    &-empty {
        font-size: 1rem;
    }

    &-termHeader {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;

        &-titleRow {
            display: flex;
            align-items: center;
            width: 100%;
        }

        &-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }

        &-metadata {
            font-size: 13px;
        }
    }

    &-cell {
        white-space: pre-wrap;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
    }

    &-sidecarButton {
        align-items: center;
        background: var(--midnight-150, #d2e3f8);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        height: 36px;
        justify-content: center;
        padding: 0;
        width: 36px;

        &:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }
    }

    &-sidecarBody {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    &-sidecarHeading {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    &-sidecarListBox {
        max-height: calc(100vh - 200px);
        overflow-x: hidden;
        overflow-y: auto;

        // Long rows (e.g. product "code • upc • artist • format") wrap instead
        // of overflowing the sidecar width.
        .SuiteListView-option-label,
        .SuiteListView-option-subtitle {
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }
}