/**
 * ================
 * Littlefoot CSS
 * tweaked for geedea.pro
 * ================
 */

.littlefoot{
    position:relative;

    --button-background-color:#949494;
    --button-text-color:#fff;
    --button-active-background-color:#3f3f3f;
    --button-active-text-color:#fff;
    --button-border-radius:0.25rem;
    --button-height:1rem;
    --button-margin:0 0.025rem;
    --button-padding:0 0.3rem;
    --button-transition:background-color 0.25s ease,color 0.25s ease;
    --popover-background-color:#f5f5f5;
    --popover-text-color:#111;
    --popover-border:1px solid #ddd;
    --popover-border-radius:0.25rem;
    --popover-max-height:15em;
    --popover-max-width:90%;
    --popover-horizontal-padding:0.8rem;
    --popover-vertical-padding:0;
    --popover-shadow:0 0 0.2rem rgba(0,0,0,.1);
    --popover-transform-origin:50% 0;
    --popover-transform:scale(0.1) translateY(calc(var(--button-height) / 2 - var(--popover-tooltip-size))) translateX(0.25rem);
    --popover-active-transform:scale(1) translateY(calc(var(--button-height) / 2 - var(--popover-tooltip-size))) translateX(0.25rem);
    --popover-transition:opacity 0.25s ease,transform 0.25s ease;
    --popover-width:15em;
    --popover-scroll-indicator-color:#3f3f3f;
    --popover-tooltip-size:0.5rem;
    --popover-z-index: 30;

    @media (prefers-color-scheme: dark) {
        --button-background-color: #555;
        --button-text-color: #fff;
        --button-active-background-color: #222;
        --button-active-text-color: #fff;

        --popover-background-color: var(--block-background-color);
        --popover-text-color: var(--text-color);
        --popover-border: 1px solid var(--border-color);
        --popover-shadow: 0 0 0.2rem rgba(100, 100, 100, 0.1);
        --popover-scroll-indicator-color: #aaa;
    }
}

/**
 * Button style
 */

.littlefoot__button{
    background-color:var(--button-background-color);
    border-radius:var(--button-border-radius);
    color:var(--button-text-color);
    cursor:pointer;
    display:inline-block;
    font-size:var(--button-font-size,12px);
    font-size:var(--button-font-size,.75rem);
    font-weight:var(--button-font-weight,initial);
    height:var(--button-height);
    margin:var(--button-margin);
    padding:var(--button-padding);
    text-decoration:none;
    transition:var(--button-transition);
    vertical-align:top;

    &.is-active, &:active, &:focus, &:hover{
        background-color:var(--button-active-background-color);
        color:var(--button-active-text-color)
    }
}

/**
 * Popover
 */

.littlefoot__popover{
    border:var(--popover-border);
    border-radius:var(--popover-border-radius);
    box-shadow:var(--popover-shadow);
    margin:calc(var(--popover-tooltip-size) + var(--button-height)) 0;
    max-width:var(--popover-max-width);
    position:absolute;
    top:0;
    transform:var(--popover-transform);
    transform-origin:var(--popover-transform-origin);
    transition:var(--popover-transition);
    width:var(--popover-width);
    z-index:var(--popover-z-index);

    &.is-above{
        bottom:0;
        top:auto
    }

    &.is-active{
        transform:var(--popover-active-transform)
    }
}

/**
 * Wrapper and Content
 */

.littlefoot__wrapper{
    position:relative;
    z-index:var(--popover-z-index);
}

.littlefoot__content,
.littlefoot__wrapper{
    border-radius:var(--popover-border-radius)
}

.littlefoot__content{
    -webkit-overflow-scrolling:touch;
    background-color:var(--popover-background-color);
    box-sizing:border-box;
    color:var(--popover-text-color);
    font-family:var(--popover-font-family,initial);
    font-size:var(--popover-font-size,initial);
    font-style:var(--popover-font-style,initial);
    font-weight:var(--popover-font-weight,initial);
    line-height:var(--popover-line-height,normal);
    max-height:var(--popover-max-height);
    overflow:auto;
    padding:var(--popover-vertical-padding) var(--popover-horizontal-padding);
    width:100%;
    p {
        margin:0.75rem 0;
    }
    img{
        max-width:100%
    }
    &:focus{
        outline:none
    }
}

/**
 * Scrolling
 */

.is-scrollable{
    --arrow-x:calc(var(--popover-horizontal-padding)*-1);
    --arrow-y:calc(var(--popover-vertical-padding)/2)
}
.is-scrollable .littlefoot__content:after{
    bottom:0;
    color:var(--popover-scroll-indicator-color);
    content:"\21E3";
    display:block;
    left:0;
    opacity:1;
    position:sticky;
    text-align:center;
    transform:translateX(var(--arrow-x)) translateY(var(--arrow-y));
    transition:var(--popover-transition);
    width:var(--popover-horizontal-padding)
}
.is-scrollable.is-fully-scrolled .littlefoot__content:after{
    opacity:0
}

/**
 * Tooltip (the arrow on popover)
 */

.littlefoot__tooltip{
    --tooltip-margin:calc(var(--popover-tooltip-size)*-1);
    background-color:var(--popover-background-color);
    border:var(--popover-border);
    box-shadow:var(--popover-shadow);
    height:calc(var(--popover-tooltip-size)*2);
    margin-left:var(--tooltip-margin);
    position:absolute;
    transform:rotate(45deg);
    width:calc(var(--popover-tooltip-size)*2);

    .is-below & { top:var(--tooltip-margin) }
    .is-above & { bottom:var(--tooltip-margin) }
}

/**
 * Printing style
 * Hide littlefoot elements and show ordinary footnotes
 */

@media not print{
    .littlefoot--print{
        display:none
    }
}
@media print{
    .littlefoot__button,.littlefoot__popover{
        display:none
    }
}
