@import "~@dnnsoftware/dnn-react-common/styles/index";
:local(.collapsibleComponent) {
    display: table;
    width: 100%;
    &.false {
        border-top: 2px solid @curiousBlue;
        border-bottom: 2px solid @curiousBlue;
        position: relative;
        top: -1px;
    }
    &:not(:last-child) {
        div.collapsible-header {
            border-bottom: 1px solid @alto;
        }
    }
    div.collapsible-header {
        text-transform: uppercase;
        color: rgb(178, 189, 195);
        width: 100%;
        float: left;
        position: relative;
        padding: 22px 22px 16px;
        box-sizing: border-box;
        cursor: pointer;
        * {
            pointer-events: none;
        }
        .delete-button {
            pointer-events: all;
        }
        &.false {
            border-bottom: none;
        }
        .collapse-icon {
            position: absolute;
            right: 20px;
            top: 21px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
            user-select: none;
            -webkit-touch-callout: none;
            /* iOS Safari */
            -webkit-user-select: none;
            /* Chrome/Safari/Opera */
            -khtml-user-select: none;
            /* Konqueror */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* IE/Edge */
            user-select: none;
            &:after {
                border: 6px solid transparent;
                border-bottom: 6px solid @thunder;
                content: "";
                position: absolute;
                left: -15px;
                top: 0;
            }
            &.collapsed {
                &:after {
                    border-top: 6px solid @thunder;
                    border-bottom: 6px solid transparent;
                    top: 5px;
                }
            }
        }
    }
    .term-header-collapsible {
        float: left;
        > div {
            float: left;
            > .dnn-grid-system {
                padding: 45px 0;
                transition: none;
            }
        }
    }
    .vocab-footer {
        text-align: center;
        padding-bottom: 55px;
        > .dnn-ui-common-button {
            margin-left: 11px;
        }
    }
}

.term-header {
    .term-icon {
        svg {
            width: 25px;
            float: left;
            height: 25px;
            margin-right: 15px;
            margin-top: -5px;
            fill: @rollingStone;
        }
    }
    .term-label {
        color: @bulgarianRose;
        .dnn-text-overflow-wrapper {
            font-size: 10pt;
        }
        * {
            pointer-events: all !important;
        }
    }
    //force pointer-event to fire on SVG.
    .delete-button {
        display: inline;
        pointer-events: none !important;
        svg {
            pointer-events: all !important;
            g, polygon {
                pointer-events: none !important;
            }
            margin-left: 10px;
            margin-bottom: -2px;
            width: 16px;
            height: 16px;
        }
    }
}