* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --active: violet;
    --inactive: silver;
    --txt-active: black;
    --txt-info-button: yellow;

    --border-width: 0.5vmax;

    --chooser-height: 100%;
    --tool-font-size: 5vh;

    --transition-duration: 0.4s;
    --transition-easing: cubic-bezier(.65, 0, .35, 1);
}

@font-face {
    font-family: 'Literata';
    src: url('../font/Literata-VariableFont_opsz\,wght.ttf') format('truetype');
}

body {
    position: relative;
    overflow: hidden;

    background-color: white;
    color: var(--txt-active);

    /* border: var(--border-width) solid var(--active); */

    height: 100vh;



    font-family: "Literata", serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;


}

chooser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--chooser-height);

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    transition: height var(--transition-duration) var(--transition-easing);

    tool {
        position: relative;

        display: grid;
        align-content: center;
        justify-content: center;

        background-color: var(--inactive);

        font-size: var(--tool-font-size);
        line-height: 1;
        text-align: center;

        transition: font-size var(--transition-duration) var(--transition-easing);

        &:nth-child(2) {
            border-left: var(--border-width) solid var(--active);
            border-right: var(--border-width) solid var(--active);
        }

        &:hover {
            cursor: pointer;
        }

        name {
            display: block;
        }

        info, info-trigger {
            display: none;
        }

        info inner {
            transition: 0.2s;
        }
    }
}

iframe {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - var(--chooser-height));

    background-color: #fff;
    border: none;

    transition: height var(--transition-duration) var(--transition-easing);
    
}

body.has-tool iframe {
    display: block;
    border: var(--border-width) solid var(--active);
}

body.has-tool:not(.entering-has-tool) iframe {
    border: var(--border-width) solid var(--active);

    @starting-style {
        border: 0;
        height: 0;
    }
}

body.has-tool.entering-has-tool iframe {
    height: calc(100% - var(--chooser-height));
}


/* state
   >> default / no tool
========================================================================= */

body.no-tool {
    --chooser-height: 100%;
    --tool-font-size: 5vh;

    chooser tool:hover {
        background-color: var(--active);
        color: var(--txt-active);
    }
}


/* state
   >> has-tool
========================================================================= */

body.has-tool {
    --chooser-height: 6vh;
    --tool-font-size: 2vh;

    chooser {
        tool {
            &.is-active {
                background-color: var(--active);
                color: var(--txt-active);
                cursor: default;

                info {
                    display: grid;
                    grid-template-rows: 0fr;
                    transition: grid-template-rows 0.2s var(--transition-easing);

                    position: fixed;
                    top: calc(var(--border-width) + var(--chooser-height) - 1px);

                    background: var(--active);
                    color: rgb(from var(--txt-active) r g b / 0);

                    /* font-size: 1.2em; */
                    line-height: 1.2;
                    text-align: left;

                    z-index: 99;

                    inner {
                        display: block;
                        min-height: 0;
                        overflow: hidden;
                        padding: 0 calc(1.5 * var(--border-width));
                    }
                }

                info-trigger {
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    translate: -1em -55%;
                    padding: 0.25em 0.5em;

                    border: 0.5px solid;
                    border-radius: 1em;

                    font-size: 0.85em;
                    line-height: 1;
                    text-transform: capitalize;

                    cursor: pointer;

                    &:hover {
                        opacity: 1;
                        color: var(--txt-info-button);
                    }
                }
            }

            &.is-active.show-info {
                info {
                    grid-template-rows: 1fr;
                    color: rgb(from var(--txt-active) r g b / 1);

                    /* &::before {
                        background-color: var(--inactive);
                        content: '';
                        display: block;
                        height: var(--border-width);
                        left: 0;
                        top: 0;
                        width: 100%;;
                    } */

                    inner {
                        padding: calc(1.5 * var(--border-width));
                        padding-top: 0;
                    }
                }

                info-trigger {
                    color: var(--txt-info-button);
                    opacity: 1;

                    &::before {
                        content: '× '
                    }
                }
            }

            &:not(.is-active) {
                /* color: var(--txt-inactive); */

                &:hover {
                    /* color: var(--txt-active); */
                    background-color: var(--active);
                }
            }

            &:nth-child(1) {
                info {
                    left: 0;
                    width: calc(100vw / 3 + var(--border-width));
                }
            }

            &:nth-child(2) {
                info {
                    left: calc(100vw / 3);
                    width: calc(100vw / 3);
                }
            }

            &:nth-child(3) {
                info {
                    right: 0;
                    width: calc(100vw / 3 + var(--border-width));
                }
            }
        }
    }
}

body.has-tool info-trigger {
    opacity: 1;

    transition: opacity var(--transition-duration);

    @starting-style {
        opacity: 0;
    }
}

body.has-tool.entering-has-tool info-trigger {
    transition-delay: calc(1 * var(--transition-duration));
}