// include a tl-layer rootclass - as that holds the layer specific class
.bg__tl-layer {
    // default section
    > .bg__tl-section {
        overflow: hidden;
        position: absolute;
        top: 0px;
        height: 39px;
        box-sizing: border-box;
        font-size: 12px;
        cursor: pointer;
        transition: outline 0.2s ease-out, opacity 0.2 ease-out;
        outline: 1px solid transparent;

        &:hover {
            outline: 1px solid white;
            z-index: 2;
            opacity: 0.8;
        }

        &.match {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        &.no-match {
            opacity: 0.3;
        }

        &.active {
            outline: 3px solid white;
            z-index: 3;
        }

        &.highlight {
            outline: 3px solid $clSecondary;
            box-shadow: 0 0 10px $clSecondary;
            z-index: 4;
        }
    }

    &.user-segment {
        > .bg__tl-section {
            background-color: mix(white, $clSecondary, 75%);
            box-shadow: 0 0 5px rgba($clSecondary, 0.8);
            &:hover {
                opacity: 1;
            }

            .annotation-title {
                white-space: nowrap;
                line-height: 39px;
                text-overflow: ellipsis;
                padding: 0 5px;
                overflow: hidden;
                font-size: 11px;
            }

            &.small {
                .content {
                    display: none;
                }
            }
        }
    }

    &.content-segment {
        > .bg__tl-section {
            background-color: mix(white, $clPrimary, 75%);
            border-left: 2px solid mix(white, $clPrimary, 50%);
            border-right: 2px solid mix(white, $clPrimary, 50%);
            div {
                white-space: nowrap;
                text-overflow: ellipsis;
                padding: 0 5px;
                line-height: 39px;
                overflow: hidden;
            }
            &.small {
                p {
                    display: none;
                }
            }
        }
    }

    &.asr-sentence {
        > .bg__tl-section {
            > div {
                width: 100%;
                height: 100%;
                background: $clDark;
            }
        }
    }

    &.asr-words {
        > .bg__tl-section {
            background-color: mix(white, $clPrimary, 90%);
            border-left: 1px solid mix(white, $clPrimary, 50%);
            border-right: 1px solid mix(white, $clPrimary, 50%);
            padding: 0px;
            height: 100%;
            &.small {
                div {
                    display: none;
                }
            }
        }
    }

    &.images {
        > .bg__tl-section {
            height: 80px;
            > div {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
        }
    }
}