html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    user-select: none;
    background-color: #efefef;
}

.toolbar {
    display: flex;
    background-color: transparent;    
}

.buttons {
    display: flex;
    flex-direction: row;
    margin: 1px;
    flex: none;
}

img[type=button] {
    cursor: pointer;
    background-color: #404040;
    padding: 4px;
    margin-right: 2px;
    border-radius: 4px;
    max-width: 24px;
    max-height: 24px;
}

img[type=button]:hover {
    filter: brightness(0.75);
}

img[type=button].edit-disabled,
img[type=button].format-disabled,
img[type=button].cut-disabled,
img[type=button].highlight-disabled,
img[type=button].remove-highlight-disabled {
    background-color: #7b7b7b;
    filter: brightness(1.25);
}

img[type=button].edit-disabled:hover,
img[type=button].cut-disabled:hover,
.toolbar:not(.cut-inner-mode):not(.remove-highlight-mode) img[type=button].highlight-disabled:hover,
.toolbar:not(.cut-inner-mode) img[type=button].remove-highlight-disabled:hover {
    filter: brightness(0.875);
}

.separator {
    display: inline-block;
    width: 2px;
    height: 22px;
    background-color: #404040;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 6px;
}

.editor {
    background-color: white;
    flex: auto;
    border: none;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cccccc;
}

@media (orientation: portrait) {
    body {
        flex-direction: row;
    }

    .toolbar {
        flex-direction: column;
        min-width: 34px;
        max-width: 34px;
        border-bottom-width: 0px;
        border-right-width: 1px;
        border-right-style: solid;
    }

    .buttons {
        flex-direction: column;
    }

    .separator {
        margin-top: 2px;
        margin-bottom: 2px;
        margin-left: 6px;
        width: 22px;
        height: 2px;
    }

    img[type="button"] {
        margin-right: 0;
        margin-bottom: 2px;
    }

    @media (max-height: 495px) {
        .separator {
            display: none;
        }
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #3a3a3a;
    }

    .editor {
        border-top-color: #4a4a4a;
    }

    img[type=button] {
        background-color: #1f1f1f;
    }

    img[type=button].edit-disabled,
    img[type=button].format-disabled,
    img[type=button].cut-disabled,
    img[type=button].highlight-disabled,
    img[type=button].remove-highlight-disabled {
        background-color: #4a4a4a;
    }

    .separator {
        background-color: #b3b3b3;
    }
}