.tutorialTextButton {
    text-decoration: none;
    text-transform: uppercase;

    color: $t_darkCasual;
    background: $t_lightCasual;

    padding: 0.3em 0.5em;
    border-radius: 3px;
    margin: 0.3em;
    display: inline-block;

    transition: background 200ms;

    &:hover {
        background: $t_lightAccent;
    }

    &:active, &:focus {
        background: $t_darkAccent;
    }
}

#tutorial {
    position: absolute;
    left: 1em;
    top: 1em;

    padding: 0.6em 1em 1em 1em;

    min-width: 20em;
    max-width: 35em;

    color: $t_darkCasual;
    background: white;

    .topButtons {
        display: flex;
        margin-bottom: 0.5em;

        .left {
            text-align: left;
        }

        .right {
            text-align: right;
        }

        .left, .right {
            flex-grow: 1;

            .button {
                display: inline-block;

                &:after {
                    display: inline-block;
                    font-family: $fa-font-family;
                    color: $ui_darkCasual;

                    padding: 0.2em 0.4em;
                    background: $ui_lightCasual;
                    border-radius: 3px;

                    margin-right: 0.5em;

                    cursor: hand;
                    cursor: pointer;
                    transition: opacity 200ms;
                }

                &:last-of-type:after {
                    margin-right: 0;
                }

                &:hover:after {
                    opacity: 0.5;
                }

                &.close {
                    &:after {
                        content: $fa-var-close;
                    }
                }

                &.prev {
                    &:after {
                        content: $fa-var-chevron-left;
                    }
                }

                &.next {
                    &:after {
                        content: $fa-var-chevron-right;
                    }
                }

                &.disabled {
                    &:after {
                        opacity: 0.5;
                        cursor: default;
                    }

                    &:hover:after {
                        opacity: 0.5;
                    }
                }
            }
        }
    }

    .content {
        margin: 0;
        padding: 0;
        line-height: 1.5em;

        p {
            margin: 0 0 1em 0;

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }

    ol.choices {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;

        li a {
            @extend .tutorialTextButton;
        }
    }
}
