.bg__column-header {
    height: $resourceViewerTabHeight;
    border-bottom: 1px solid $clMediumGrey;
    background-color: $clGrey;
    box-sizing: border-box;

    > .close-button {
        width: $resourceViewerTabHeight;
        height: $resourceViewerTabHeight;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;

        transition: background-color $transition;
        &:hover {
            background-color: rgba(white, 0.25);
            &::after,
            &::before {
                border-color: $clDarkGrey;
            }
        }

        // close cross
        $crossSize: 15px;
        &::after,
        &::before {
            content: '';
            display: block;
            position: absolute;
            width: $crossSize;
            left: 50%;
            top: 50%;
            margin-left: $crossSize / -2;
            border-bottom: 2px solid $clMediumGrey;
            transform: rotate(-45deg);
            transition: border-color $transition;
        }

        &::before {
            transform: rotate(45deg);
        }
    }
}