$black: #222;
$help-button-icon-size: 40px;

.modal-help {
    font-size: 1.6rem;
    line-height: normal;
    color: $black;

    .modal-header {
        .btn-close {
            content: '\e848';
            font-family: 'generic-icons';
            font-size: 2rem;
            color: $red;
            opacity: 1;
        }
    }

    .modal-dialog {
        max-width: 920px;
    }

    .burger-button {
        display: none;
    }

    h2 {
        font-size: 2rem;
    }

    p {
        margin: 1.6rem 0;
        color: $black;
    }

    #TOC {
        float: left;
        width: 20%;
        margin-right: 5%;

        ul {
            border-left: 5px solid $primary;

            li {
                display: block;
                margin: 1em 0;

                a {
                    color: $secondary;

                    &:hover {
                        color: $primary;
                    }
                }
            }
        }
    }

    img {
        max-width: 100%;
    }

    .section {
        width: 70%;
        margin-left: 25%;

        h2 {
            width: 100%;
            margin-bottom: 2rem;
            color: $secondary;
        }
    }
}

@include media-breakpoint-down(sm) {
    .modal-help {
        #TOC {
            float: none;
            width: auto;
            margin: 2rem;

            ul {
                padding: 0;
                position: absolute;
                display: none;
                margin-top: 4rem;
                margin-left: -2rem;
                background-color: $white;
                box-shadow: .1rem .1rem 1rem rgba(0, 0, 0, .25);
            }

            ul li {
                padding: 1.5rem;
                margin: 0;
                border-bottom: .1rem solid #ddd;

                &:hover {
                    background-color: $orange;

                    a {
                        display: block;
                        color: $white;
                    }
                }
            }
        }

        .burger-button {
            position: absolute;
            display: block;
            width: $help-button-icon-size;
            height: $help-button-icon-size;
            padding: 0;
            line-height: $help-button-icon-size;
            color: $white;
            text-align: center;
            cursor: pointer;
            background-color: $orange;
            border: none;
            border-radius: $border-radius;

            .burger-icon {
                font-family: "generic-icons";
                font-style: normal;

                &::before {
                    content: "\e956";
                }
            }
        }

        .burger-menu {
            &.active {
                #TOC ul {
                    display: block;
                }
            }
        }

        .section {
            width: auto;
            margin: 2rem 0 0;

            h2 {
                width: auto;
                margin-left: 5rem;
            }
        }
    }
}