/* #region General */

:root {    
    --main-color: var(--tn-main-text-color);
    --body-bg-color: transparent;
    --toolbar-border-color: var(--tn-main-border-color);
    --toolbar-bg-color: transparent;
    --toolbar-icon-opacity: 1;
    --toggled-btn-bg-color: var(--tn-hover-item-background-color);
    --doorhanger-bg-color: var(--tn-menu-background-color);
    --doorhanger-separator-color: var(--tn-main-border-color);

    --page-margin: 12px auto;
    --spreadHorizontalWrapped-margin-LR: 4px;

    color-scheme: var(--tn-theme-style);
}

:root button,
:root dialog,
:root #toolbarContainer,
:root .toolbarButton,
:root #scaleSelect,
:root .toolbarButtonWithContainer .editorParamsToolbar .editorParamsLabel,
:root #toolbarContainer #toolbarViewer input,
:root #editorUndoBar,
:root .dialogButton {
    font-family: "Inter";
    font-size: 11;
}

#secondaryToolbar,
#documentPropertiesDialog,
#findbar.doorHanger,
.doorHangerRight,
#printServiceDialog {
    border: 1px solid var(--tn-dropdown-border-color);
    border-radius: var(--tn-dropdown-border-radius);
    background-color: var(--tn-menu-background-color);
    padding: var(--tn-menu-padding-size);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--tn-dropdown-shadow-opacity));
    backdrop-filter: var(--tn-dropdown-backdrop-filter);
}

.doorHangerRight,
.doorHangerLeft,
.doorHanger {
    &::after, &::before {
        display: none;
    }
}

:root .toggle-button {
    --toggle-border-color: transparent;
    --toggle-background-color: var(--tn-input-background-color);
    --toggle-background-color-hover: var(--toggle-background-color);
    --toggle-dot-background-color: var(--tn-input-text-color);
    --toggle-background-color-pressed: var(--tn-input-text-color);
    --toggle-background-color-pressed-hover: var(--toggle-background-color-pressed);
    cursor: pointer;
}

:root .colorPicker {
    --hover-outline-color: var(--tn-input-focus-outline-color);
    --selected-outline-color: var(--tn-main-text-color);
}

/* #endregion */

/* #region Toolbar */

.toolbarButton {
    color: var(--menu-text-color);

    &:not(.labeled):active::before {
        transform: scale(.85) !important;
    }

    &:hover {
        background: var(--tn-hover-item-background-color);
        border-radius: 6px;
        color: var(--tn-hover-item-text-color);
    }
}

#findbar {
    padding: unset;
}

#scaleSelectContainer {
    --dropdown-btn-bg-color: transparent;
    --button-hover-color: var(--tn-hover-item-background-color);
    border-radius: 6px;

    select:focus {
        background: var(--tn-main-background-color);
    }
}

/* Toolbar editor dropdowns */
:root .editorParamsToolbar:not(.menu),
:root #highlightParamsToolbarContainer {
    padding: 10px 16px;
}

/* Toolbar dropdowns */
:root .editorParamsToolbar {
    .menu {
        padding: 8px;
    }

    .editorParamsToolbarContainer {
        padding: 0;
    }
}

/* Overflow menu */
#secondaryToolbar {
    --toolbar-icon-bg-color: var(--tn-menu-item-icon-color);
    --toolbar-icon-hover-bg-color: var(--tn-menu-item-icon-color);
    --toggled-btn-bg-color: transparent;
    --toggled-btn-color: currentColor;
    --doorhanger-icon-opacity: 1;
    padding: var(--tn-menu-padding-size);
}

/* Horizontal menu dividers */
:root #highlightParamsToolbarContainer #editorHighlightVisibility .divider,
:root .horizontalToolbarSeparator {
    position: relative;
    overflow: visible;
    background: unset;
    border: none;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        border-top: 1px solid var(--tn-main-border-color);
    }
}

/* Radio menu items */
#cursorToolButtons .toolbarButton,
#scrollModeButtons .toolbarButton,
#spreadModeButtons .toolbarButton {
    --toggled-hover-active-btn-color: var(--tn-hover-item-background-color);
    --toggled-btn-color: var(--tn-menu-item-icon-color);
    position: relative;

    &::after {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        width: 2em;
        height: 100%;
        /* https://pictogrammers.com/library/mdi/icon/radiobox-blank/ */
        mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3eradiobox-blank%3c/title%3e%3cpath d='M12%2c20A8%2c8 0 0%2c1 4%2c12A8%2c8 0 0%2c1 12%2c4A8%2c8 0 0%2c1 20%2c12A8%2c8 0 0%2c1 12%2c20M12%2c2A10%2c10 0 0%2c0 2%2c12A10%2c10 0 0%2c0 12%2c22A10%2c10 0 0%2c0 22%2c12A10%2c10 0 0%2c0 12%2c2Z' /%3e%3c/svg%3e");
        mask-size: 16px;
        mask-repeat: no-repeat;
        mask-position: center center;
        background-color: var(--tn-main-text-color);
    }

    &.toggled::after {
        /* https://pictogrammers.com/library/mdi/icon/radiobox-marked/ */
        mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3eradiobox-marked%3c/title%3e%3cpath d='M12%2c20A8%2c8 0 0%2c1 4%2c12A8%2c8 0 0%2c1 12%2c4A8%2c8 0 0%2c1 20%2c12A8%2c8 0 0%2c1 12%2c20M12%2c2A10%2c10 0 0%2c0 2%2c12A10%2c10 0 0%2c0 12%2c22A10%2c10 0 0%2c0 22%2c12A10%2c10 0 0%2c0 12%2c2M12%2c7A5%2c5 0 0%2c0 7%2c12A5%2c5 0 0%2c0 12%2c17A5%2c5 0 0%2c0 17%2c12A5%2c5 0 0%2c0 12%2c7Z' /%3e%3c/svg%3e");
    }
}

/* Permanently removed buttons */
#viewsManagerToggleButton,
#downloadButton,
#secondaryDownload,
#secondaryOpenFile {
    display: none;
}

/* The separator after the hidden "Open" item */
#secondaryToolbarButtonContainer div.visibleMediumView + .horizontalToolbarSeparator {
    display: none;
}

/* #endregion */

/* #region Properties Dialog */

#documentPropertiesDialog {
    --separator-color: transparent;
    
    user-select: none;
    padding: 1em;

    .row {
        line-height: 1.5;

        > span {
            font-weight: bold;
            opacity: .5;
        }

        > p {
            user-select: all;
        }
    }

    /* Hide irrelevant properties */
    > .row:has(#fileNameField),
    > .row:has(#linearizedField) {
        display: none;
    }
}

/* #endregion */

/* #region Viewer Area */

.pdfViewer {
    .page,
    .page > .canvasWrapper,
    .page > .canvasWrapper > canvas {
        border-radius: 6px;
    }

    .page {
        border: 1px solid var(--tn-main-border-color);
        box-shadow: 7px 7px 15px #00000010;
    }
}

#viewsManager {
    display: none;
}

/* #endregion */