@import "shared/mixins-and-vars";

@menu-padding: 12px;
@font-size-reg: (24 / @px);
@button-font-size: (20 / @px);
@button-width: ~"calc(@{font-size-reg} + @{menu-padding})";
@double-button-width: ~"calc(@{button-width} * 2)";
@button-top: ~"calc(@{button-width}/11)";

.iframed-example {
    [role="banner"],
    header,
    [role="navigation"],
    nav,
    footer,
    .enable-toc__toggle-button {
        display: none;
    }
}

:root {
    scrollbar-width: thin;
}

body {
    .scrollbars(3px, #fff, #000);
}

#main {
    max-width: 100% !important;
    padding: 10px !important;
}

.reflow-examples {
    &__index {
        text-align: center;
        background: black;
        margin: 0 -1em 1em -1em;
        overflow: hidden;
        padding: 0 @menu-padding;
        position: relative;
    }

    &__arrow-button {
        display: none;
        appearance: none;
        border: none;
        background-color: transparent;
        color: white;
        font-weight: bold;
        font-size: @button-font-size;
    }

    &__show-arrow-buttons {
        padding: 0;
    }

    &__show-arrow-buttons &__arrow-button {
        display: inline-block;
        width: @button-width;
        position: absolute;
        top: @button-top;

        &--previous {
            text-align: left;
            left: 0;
            background: linear-gradient(
                to right,
                #000,
                #000 @font-size-reg,
                rgba(0, 0, 0, 0) 100%
            );
        }

        &--next {
            text-align: right;
            right: 0;
            background: linear-gradient(
                to left,
                #000,
                #000 @font-size-reg,
                rgba(0, 0, 0, 0) 100%
            );
        }
    }

    &__show-arrow-buttons &__list {
        //width: ~"calc(100% - @{double-font-size-reg})";
        padding: 0 @button-width;

        &::after {
            display: inline-block;
            content: "";
            width: @button-width;
        }
    }

    &__remove-overflow {
        white-space: normal;
    }

    &__content {
        max-width: 1024px;
        margin: 0 auto;
    }

    &__list {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 100%;
        overflow-x: scroll;

        white-space: nowrap;
    }

    &__remove-overflow &__list {
        overflow: auto;
        white-space: normal;
    }

    &__list-item {
        font-size: @font-size-reg;
        font-weight: bold;
        display: inline-block;
        padding: 0.5vw 1vw;
    }

    &__link {
        color: white;
        text-decoration: none;
    }

    &__dropdown {
        background: white;
        margin: 0 -1rem;
        padding: 0 1rem;

        .enable__is-dark-mode & {
            background: @dark-mode-darkgrey;
        }

        &--content {
            padding: 0;
        }
    }

    &__dropdown &__list {
        background: black;
    }
}

h1 {
    font-size: (25 / @px);
    text-align: center;
    margin-bottom: 1em;
}

// Let's make links with tabindex="-1" set unclickable with a mouse.
a[tabindex="-1"] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}