.bg__tl-layer-headers {
    > .tl-layer-header {
        cursor: pointer;
        box-sizing: border-box;
        border-bottom: 1px solid $clGreyTint;
        min-height: $tlLayerHeight - 1;
        user-select: none;
        font-size: 13px;
        font-weight: bold;
        line-height: 39px;
        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, 95%);
        }

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

        &.user-segment {
            border-bottom: 1px solid $clDark;
            padding-right: 0;

            // Title
            span.bg__editable-text {
                height: 30px;
                vertical-align: top;
            }

            .bg__editable-text {
                width: calc(100% - 30px);
                max-width: calc(100% - 30px);
                height: 30px;
            }

            &.active {
                .bg__editable-text {
                    &:hover {
                        border-bottom: 1px dotted $clSecondary;
                    }
                }
            }

            &.tools {
                .bg__editable-text {
                    max-width: calc(100% - 85px);
                }
            }

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

            .add-segment-button,
            .delete-segment-button,
            .annotate-segment-button {
                float: right;
                width: 28px;
                height: 40px;

                transition: background-color 0.3s ease-out;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 18px;

                &:hover {
                    background-color: rgba($clSecondary, 0.2);
                }
            }
            .add-segment-button {
                text-align: center;
                color: $clSecondary;
                font-size: 19px;
            }

            .delete-segment-button {
                background-image: $iconTrashUrl;
            }

            .annotate-segment-button {
                background-image: $iconTagUrl;
            }
        }
    }
}