Table.scss

@use "App";

#table {
    width: 80%;
    max-width: 40rem;
    margin-top: 0;
    $table-stroke-duration: App.$stroke-anim-duration * 2;

    .table-row {
        $anim-delay: 0s;

        display: flex;
        flex-direction: row;
        height: 2.1rem;
        align-items: center;
        position: relative;

        &:not(:first-of-type) h2 {
            font-weight: 500;
        }

        @for $i from 0 to 13 {
            .stroke {
                // noinspection Stylelint
                @extend .stroke-common;

                clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

                &#stroke#{$i} {
                    $anim-delay: #{$i * 0.2}s;

                    animation: $table-stroke-duration draw-stroke forwards $anim-delay;
                }

                &.reverse-anim {
                    &#stroke#{$i} {
                        $anim-delay: #{$i * 0.2}s;

                        animation: $table-stroke-duration draw-stroke-reversed forwards $anim-delay;
                    }
                }
            }
        }

        @keyframes draw-stroke-reversed {
            from {
                $viewport-width: 100%;

                clip-path: polygon(0 0, $viewport-width 0, $viewport-width 100%, 0 100%);
            }

            to {
                $viewport-width: 0;

                clip-path: polygon(0 0, $viewport-width 0, $viewport-width 100%, 0 100%);
            }
        }
    }
}

@media (width <= 650px), (height <= 650px) {
    #table {
        width: 80%;
    }

    #table .table-row {
        height: unset;
        align-items: flex-start;

        .stroke {
            height: 100%;
            width: 110%;
        }

        h2 {
            line-height: 1.3rem;
            margin: 0.5rem 0;
            font-size: 1.2rem;
            max-width: 10rem;
            padding-right: 1rem;
        }

        .divisor, .rule, .divisible {
            flex-shrink: 0;
        }

        .divisor {
            flex: 2.4;
        }

        .rule {
            flex: 5;
            align-items: flex-start;

            img {
                margin-top: 0.6rem;
                height: 1.0rem;
                margin-left: auto;
                margin-right: 0.7rem;
            }
        }

        .divisible {
            flex: 2.5;
        }
    }
}