/*
 * Single-line cell text that expands on click. The text sits vertically centered on the left,
 * the toggle in the bottom right corner of the cell. Text width can be set per table via
 * --dt-expandable-width.
 */
.dt-expandable-cell {
    position: relative;
    vertical-align: middle;
}

.dt-expandable {
    cursor: pointer;
}

.dt-expandable-text {
    display: block;
    max-width: var(--dt-expandable-width, 30rem);
}

/* Keeps the cut-off text clear of the toggle in the corner. */
.dt-expandable.is-overflowing,
.dt-expandable.is-expanded {
    padding-right: 3rem;
}

.dt-expandable .dt-expandable-toggle {
    display: none;
    position: absolute;
    right: 2rem;
    bottom: 0.25rem;
    padding: 0;
    border: 0;
    font-size: 0.75rem;
    line-height: 1;
    text-decoration: none;
}

.dt-expandable .dt-expandable-toggle:hover {
    text-decoration: underline;
}

.dt-expandable.is-overflowing .dt-expandable-toggle,
.dt-expandable.is-expanded .dt-expandable-toggle {
    display: block;
}