// 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: 40px;
        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;
        }
    }

    &.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%);
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 5px;
            line-height: 40px;
            &.small {
                span {
                    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;
            }
        }
    }
}
