@import "inc/bootstrap";

.qti-extendedTextInteraction {

    .text-container {
        min-height: 50px;

        &.text-preformatted {
            font-family: $monospaceFont;
        }
    }

    input {
        width: 100%
    }

    pre {
        font-family: $regularFont;
    }

    .solid, .bordered {
        & > li {
            padding: 0;
            border: none;
        }
        & ~ input,
        & ~ textarea,
        & ~ .cke {
            border: 6px solid  whiten($uiClickableDefaultBg, .2);
            .cke_top{
                border: none;
                margin: 3px;
                width: calc(100% - 6px);
                @include box-shadow(0,0,0,0,transparent);
            }
            .cke_bottom{
                border : none
            }
        }
    }

    .active {
        & > input,
        & > textarea,
        input.active,
        textarea.active {
            border-color: mix(#fff, $info, 20%);
        }
    }

    textarea {
        max-width: 100%!important;
        width: 100%;
        height: 150px;
        resize: none;

        &[disabled="disabled"] {
        	background-color: white;
        	opacity: 1 !important;
        }
    }

    .text-counter{
        text-align : right;
        .count-words,
        .count-chars{
            font-weight: bold;
        }
    }
}