/* Curve authoring tool styling.
 *
 * The toolbar button and sidebar mirror the measure tool's styling (see
 * measure-tool.css) so the two tools look like siblings in the toolbar.
 * Only one tool is active at any one time so the two sidebars never both
 * render.
 */

.curve-tool-button {
    border-radius: 4px;
    height: 32px;
    width: 32px;
    padding: 8px;
}

.curve-tool-button.selected {
    background: var(--indi-white);
    color: var(--indi-primary-colour);
}

.curve-tool-button.selected:hover {
    background: var(--indi-primary-light);
    color: var(--indi-white);
}

.curve-tool-sidebar {
    min-width: 180px;
    max-width: 20%;
    position: absolute;
    top: 45px;
    right: 12px;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
}

.curve-tool-sidebar .list-item {
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    text-align: right;
    white-space: nowrap;
}

.curve-tool-sidebar .list-item + .list-item {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.curve-tool-sidebar .list-item.prompt {
    justify-content: center;
    text-align: center;
    font-style: italic;
    opacity: 0.75;
    /* Override the nowrap inherited from .list-item so the long shift-hint
       prompt wraps cleanly inside the narrow sidebar instead of overflowing. */
    white-space: normal;
}

.curve-tool-sidebar .list-item.copy-actions-row {
    gap: 4px;
}

.curve-tool-sidebar .list-item.copy-actions-row .copy-actions-label {
    flex: 1 1 auto;
    text-align: left;
    opacity: 0.6;
}

.curve-tool-sidebar .list-item.clear-row {
    justify-content: flex-end;
}

.curve-tool-sidebar .copy-action-button {
    height: 24px;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    gap: 4px;
}

.curve-tool-sidebar .copy-action-button:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

.curve-tool-sidebar .clear-curves-button {
    height: 24px;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    gap: 4px;
}

.curve-tool-sidebar .clear-curves-button:hover {
    background-color: rgba(0, 0, 0, 0.08);
}