/*
 * Filerobot sizes itself to 100% of the element it is rendered into, while that element sits in a
 * dialog and would otherwise take its height from its content: without a height of its own the
 * editor collapses to nothing. The viewport unit keeps the dialog on screen on a laptop or tablet,
 * the cap keeps the canvas from stretching past what is still workable on a tall screen. The
 * toolbar of the template takes its own height out of that, the editor gets the rest.
 */
.image-editor {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: min(80vh, 900px);
}

.image-editor__canvas {
    flex: 1 1 auto;
    min-height: 0;
}

/*
 * Two rows below the picture: the tools of every tab, and under them the line colours. The tools
 * row scrolls sideways on a narrow phone rather than wrapping onto a third row and taking height
 * from the picture. It is centred by the margins of its outer buttons and not by justify-content,
 * which would push the first buttons out of reach to the left once the row overflows.
 * The buttons are sized for a finger, as the editor is used on a phone as well.
 */
.image-editor__tools {
    display: flex;
    flex: 0 0 auto;
    gap: .375rem;
    overflow-x: auto;
}

.image-editor__tools > :first-child {
    margin-left: auto;
}

.image-editor__tools > :last-child {
    margin-right: auto;
}

.image-editor__tool {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-width: 3rem;
    min-height: 3rem;
    font-size: 1.125rem;
}

.image-editor__tool svg {
    width: 1.5rem;
    height: 1.5rem;
}

.image-editor__tool[aria-pressed="true"] {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

@media (max-width: 760px) {
    .image-editor__tool-label {
        display: none;
    }
}

.image-editor__colors {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    gap: .75rem;
}

.image-editor__color {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 3px solid var(--white);
    border-radius: 50%;
    background-color: var(--image-editor-color);
    box-shadow: 0 0 0 1px var(--bs-border-color);
}

.image-editor__color[aria-pressed="true"] {
    box-shadow: 0 0 0 3px var(--image-editor-color);
}

/*
 * The four colour buttons of the template set the line colour, so the fill colour picker at the
 * head of the options bar goes. The line colour picker in the stroke popup stays reachable, next to
 * the line width.
 */
.image-editor .FIE_annotations-options > .FIE_color-picker-triggerer {
    display: none;
}

/*
 * The toolbar below stands in for the editor's tab bar, its tools bar and, on a phone, the button
 * opening its tab drawer. The options of the selected tool sit in a bar of their own, which stays.
 * The editor keeps the hidden tools bar up to date, and the image editor controller reads which
 * tool is selected from it.
 */
.image-editor .FIE_tabs,
.image-editor .FIE_tabs_toggle_btn,
.image-editor .FIE_tools-bar {
    display: none;
}

/*
 * Every annotate tool carries the same row of extra options, each behind a little button of its
 * own: opacity, stroke, shadow and the position fields. The bundle only leaves stroke and shadow
 * out together, and only when the editor is switched over to cloudimage, so these are taken out
 * here: opacity is not something to set on a mark, and the shadow is left off as well. Those
 * buttons share a single class and are told apart by their tooltip, which holds the editor's own
 * label. Those keys are left out of the translation map of ImageEditorService on purpose, so the
 * tooltips stay the English these selectors match. With the buttons gone there is no way left to
 * reach the fields behind them, and the editor leaves a new annotation fully opaque and without a
 * shadow.
 */
.image-editor .FIE_annotation-option-triggerer[title="Opacity"],
.image-editor .FIE_annotation-option-triggerer[title="Shadow"] {
    display: none;
}