@mixin padding {
    padding: 14px 12px;
}

.examination {
    display: flex;
    flex-direction: column;
    height: calc(100% - 44px);
    padding-bottom: 44px;

    .topic {
        @include padding;
        font-size: $font_16;
        line-height: 30px;
    }

    .category-tag {
        padding: 4px;
        margin-right: 10px;
        font-size: $font_12;
        background-color: $E0B97B;
        color: $white;
    }

    .show-answer {
        @include padding;
        text-align: right;

        span {
            color: $active;
            font-size: $font_14;
            line-height: $font_14;

            i {
                transform: translateY(30%);
                display: inline-block;
            }
        }
    }


    .options {
        list-style: none;

        li {
            @include padding;
            $padding: 7px;
            font-size: $font_16;
            margin-bottom: 7px;
            padding-top: $padding;
            padding-bottom: $padding;
            line-height: 30px;
        }

        .alphabet {
            $size: 30px;
            width: $size;
            height: $size;
            margin-right: 16px;
            display: inline-block;

            border: 1px solid $color_999;
            border-radius: 50%;
            text-align: center;
            font-size: $font_14;
            line-height: $size;
        }

        .active {
            color: $active;
            background: #F8F8Fb;

            .alphabet {
                border-color: $active;
            }
        }
    }

    .answer {
        @include padding;
        background-color: $bg_f5f5f5;
        visibility: hidden;
        overflow: auto;
        flex: 1;

        a{
            color: $active;
        }

        .legend {
            font-size: $font_14;
            color: $color_999;
        }

        .content {
            font-size: $font_16;
        }

        &.scale {
            animation: slideInDown .3s both;
        }
    }

}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -10%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
}

.slideInDown {
    animation-name: slideInDown;
}