/* SCROLLKNOPPEN */
/* @group goto buttons: scroll control */


/*
 * Module wrapper
 *
 * The module can be placed in top1, footer1, or another
 * Helix module position. It must not determine the position
 * of the actual navigation buttons.
 */
.lko-goto-buttons {
    position: static;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}


/*
 * GOTO BUTTONS
 */

.lko-goto-button {
    display: none;                 /* Hidden by default */
    position: fixed;               /* Fixed/sticky position */
    font-size: max( 2vw, 2vh );    /* Increase font size according to the height in portrait view */
    right: -4.1em;                 /* Displace the button beyond the righthand side of the viewport, showing the symbol only; best working value in practice */
    z-index: 99;                   /* Set goto top button level: Make sure it does not overlap */
    outline: none;                 /* Remove outline */
    background-color: #728bb5;     /* LKOpalette 701B 260223113824 Goto button bg */
    color: #e8f0ff;                /* LKOpalette 700B 260223113824 Goto button basefont */
    opacity: 0.8;                  /* Transparent .. Opaque [0 .. 1] */
    cursor: pointer;               /* Add a mouse pointer on hover */
    padding-top:   0.5em;          /* Some padding */
    padding-right: 1em;            /* Some padding */
    padding-bottom:0.5em;          /* Some padding */
    padding-left:  0.5em;          /* Some padding */
    border-radius: 0.7em;          /* Rounded corners */

    /*
     * The original button moves horizontally by changing
     * its RIGHT position.
     */
    transition:
    right 0.25s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}


/*
 * TOP BUTTON
 */

.lko-goto-top {
    top: 30vh;                     /* Place the button just above the middle of the page */
}


/*
 * BOTTOM BUTTON
 */

.lko-goto-bottom {
    top: 50vh;                     /* Place the button just beneath the middle of the page */
}


/*
 * VISIBLE STATE
 *
 * JavaScript adds the .is-visible class.
 */

.lko-goto-button.is-visible {
    display: block;
}


/*
 * HOVER
 */

.lko-goto-button:hover,
.lko-goto-button:focus-visible {
    background-color: #344d6c;     /* LKOpalette 701C 260223113824 Goto button hover bg */
    color: #f8e4c4;                /* LKOpalette 700C 260223113824 Goto button hover basefont */
    right: -10px;
}


/*
 * BUTTON CONTENTS
 */

.lko-goto-button i {
    vertical-align: middle;
}

.lko-goto-label {
    vertical-align: middle;
}


/*
 * KEYBOARD FOCUS
 */

.lko-goto-button:focus-visible {
    outline: 2px solid #f8e4c4;
    outline-offset: 2px;
}


/*
 * REDUCED MOTION
 */

@media (prefers-reduced-motion: reduce) {
    .lko-goto-button {
        transition: none;
    }
}


/* @end goto buttons: scroll control */