.bg__tl-layer-headers {
    > .tl-layer-header {
        cursor: pointer;
        box-sizing: border-box;
        border-bottom: 1px solid $clGreyTint;
        min-height: $tlLayerHeight;

        font-size: 13px;
        font-weight: bold;
        line-height: 40px;
        padding: 0 10px 0 7px;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-left: 3px solid transparent;
        transition: background-color 0.2s ease-out, border-color 0.2s ease-out;

        &:hover {
            border-left: 3px solid mix(white, $clPrimary, 50%);
            background-color: mix(white, $clPrimary, 85%);
        }

        &.active {
            border-left: 3px solid $clPrimary;
            background-color: mix(white, $clPrimary, 75%);
        }
    }
}
