
.SimpleScrollTopButton {
    /* Scroll-Top Button Positioning */
    position: fixed;
    right: var(--sst-btn-position-right, 20px);
    bottom: var(--sst-btn-position-bottom, 20px);
    
    /* Button Sizing */
    width: var(--sst-btn-button-size, 40px);
    height: var(--sst-btn-button-size, 40px);
    border-radius: var(--sst-btn-border-radius, 50%);

    /* Content Centering */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    /* Color Style */
    color: var(--sst-btn-color, white);
    fill: var(--sst-btn-color, white);
    stroke: var(--sst-btn-color, white);
    background: var(--sst-btn-background, black);
    box-shadow: var(--sst-btn-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.25));
    border: 1px solid var(--sst-btn-border-color, transparent);

    /* Typography */
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--sst-btn-font-size, 30px);
    font-weight: bold;

    /* Misc Properties */
    cursor: pointer;
    user-select: none;
    z-index: 1000;

    /* Show / Hiding using CSS Trasition */
    transition: 500ms opacity, 250ms background-color;
    opacity: 0;
}

.SimpleScrollTopButton:hover {
    transition: 350ms background-color;
    background-color: var(--sst-btn-hover-color, #444);
}

.SimpleScrollTopButton:active {
    background: var(--sst-btn-background-active, #444);
}

.SimpleScrollTopButton svg {
    width: var(--sst-btn-font-size, 30px);
    height: var(--sst-btn-font-size, 30px);
}