.bg__segment-annotations {
    margin-top: 1px;

    > .actions {
        position: relative;
        height: 30px;

        span {
            line-height: 30px;
            padding-left: 10px;
            font-size: 13px;
            display: inline-block;
        }

        > .add {
            color: $clPrimary;
            position: absolute;
            right: 0;
            top: 0;
            width: 30px;
            height: 33px;
            text-align: center;
            transition: background-color 0.3s ease-out;
            cursor: pointer;
            font-size: 19px;
            line-height: 33px;

            &:hover {
                background-color: $clGrey;
            }

            &.active:after {
                transform: rotate(45deg);
            }

            &:after {
                display: inline-block;
                transition: transform 0.3s ease-out;
                content: '+';
            }
        }
    }

    > .segments {
        padding-left: 10px;
    }
}
