.plot-unit {
    display:      inline-block;
    min-width:    2rem;
    font-size:    var(--pf-global--FontSize--xs);
    text-align:   right;
    color:        var(--color-gray-9);
    margin-right: 0.5rem;
}

.plot-title {
    color: black;
}

.flot-y-axis .flot-tick-label {
    width: 2rem;
    margin-right: 0.5rem;
}

.flot-x-axis .flot-tick-label {
    margin-top: 0.25rem;
}

.flot-tick-label {
    font-size: var(--pf-global--FontSize--xs);
}

.show-zoom-cursor .zoomable-plot {
    cursor: ew-resize;
}

.zoom-controls {
    --dropdown-max: 1fr;
    display: none;
}

@media (min-width: 640px) {
    .zoom-controls {
        --dropdown-max: 10rem;
    }
}

.show-zoom-controls .zoom-controls {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 0.5rem;
    justify-content: end;
    margin: 0 0 0.5rem 0;
    position: relative;
    /* Put size constraints on the first column, the dropdown */
    grid-template-columns: minmax(5rem, var(--dropdown-max)) 2.5rem min-content;
    min-height: 2.25rem;
}

/* Make the dropdown take up space vertically */
.zoom-controls > .dropdown,
.standard-zoom-controls > .dropdown {
    display: inline-flex;
}

/* Ensure zoom button is proper width */
.zoom-controls > .btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Make the custom dropdown button properly stretchy */
.zoom-controls > .dropdown > .btn,
.standard-zoom-controls > .dropdown > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}