.bebb-page-navigation {
    display: flex;
    align-items: center;
    gap: 0;
    height: var(--bebb-panel-toolbar-height, 32px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--bebb-control-radius, 5px);
    background: var(--bebb-page-control-background, #f5f5f5);
    color: var(--bebb-page-control-color, #2d2b26);
    box-shadow: none;
}

.bebb-page-navigation button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    transition: background-color var(--bebb-control-transition);
}

.bebb-page-navigation :is(button, select):hover,
.bebb-page-navigation :is(button, select):focus-visible,
.bebb-page-sync:hover,
.bebb-page-sync:has(:focus-visible) {
    background-color: var(--bebb-control-hover-background);
    --page-sync-icon-cutout: var(--bebb-control-hover-background);
}

.bebb-page-navigation svg {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
}

.bebb-page-navigation > select.bebb-page-select:not([multiple], [size]) {
    width: 86px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--bebb-page-control-background, #f5f5f5);
    background-image: none;
    color: inherit;
    box-shadow: none;
    font: inherit;
    font-weight: 400;
    text-align-last: center;
    appearance: none;
    cursor: pointer;
    transition: background-color var(--bebb-control-transition);
}

.bebb-page-navigation > select.bebb-page-select:is(:hover, :focus-visible) {
    background-color: var(--bebb-control-hover-background);
}

.bebb-page-navigation :is(button, select):focus {
    outline: none;
    box-shadow: none;
}

.bebb-page-navigation :is(button, select):focus-visible {
    outline: 2px solid var(--bebb-control-focus-color);
    outline-offset: -2px;
}

.bebb-page-sync {
    --page-sync-icon-cutout: var(--bebb-page-control-background, #f5f5f5);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bebb-panel-toolbar-height, 32px);
    height: var(--bebb-panel-toolbar-height, 32px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--bebb-page-control-background, #f5f5f5);
    color: var(--bebb-page-control-color, #2d2b26);
    box-shadow: none;
    transition: background-color var(--bebb-control-transition), color var(--bebb-control-transition);
}

.bebb-page-sync[data-sync-mode="navigation"],
.bebb-page-sync[data-sync-mode="scroll"] {
    --page-sync-icon-cutout: var(--bebb-sync-active-background);
    background-color: var(--bebb-sync-active-background);
    color: var(--bebb-sync-active-color);
}

.bebb-page-sync:is([data-sync-mode="navigation"], [data-sync-mode="scroll"]):is(:hover, :has(:focus-visible)) {
    --page-sync-icon-cutout: var(--bebb-sync-active-hover-background);
    background-color: var(--bebb-sync-active-hover-background);
}

.bebb-page-sync svg {
    display: block;
    flex: none;
    width: 24px;
    height: 24px;
    max-width: none;
}


.bebb-page-sync__icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Display the unmodified original SVG for the selected synchronization mode. */
.bebb-page-sync [data-page-sync-icon] {
    display: none;
}

.bebb-page-sync[data-sync-mode="off"] [data-page-sync-icon="off"],
.bebb-page-sync[data-sync-mode="navigation"] [data-page-sync-icon="navigation"],
.bebb-page-sync[data-sync-mode="scroll"] [data-page-sync-icon="scroll"] {
    display: block;
}

.bebb-page-sync > select.bebb-page-sync-select:not([multiple], [size]) {
    position: absolute;
    inset: 0;
    width: var(--bebb-panel-toolbar-height, 32px);
    height: var(--bebb-panel-toolbar-height, 32px);
    margin: 0;
    padding: 0;
    border: 0;
    /* The invisible select still supplies the native popup's palette. */
    color-scheme: light;
    background: #fff;
    color: var(--bebb-page-control-color, #2d2b26);
    box-shadow: none;
    opacity: 0;
    cursor: pointer;
}

.bebb-page-sync-select option {
    background: #fff;
    color: var(--bebb-page-control-color, #2d2b26);
}

.bebb-page-sync > select.bebb-page-sync-select:focus {
    outline: none;
    box-shadow: none;
}

.bebb-page-sync:has(:focus-visible) {
    outline: 2px solid var(--bebb-control-focus-color);
    outline-offset: 2px;
}