@import "webstatic:/static/global.less";

@fade-out-width: 32px; // same as BitBucket Cloud
@max-width: 150px; // same as BitBucket Cloud

#commits-table {

    // if the commit row has tags, then we don't show the fade gradient of the commit row itself, and we add our own
    // in front of the tags container
    .commit-row.has-tags .message:after {
        background: inherit;
        position: static;
        width: 0;
        height: 0;
    }


    .message {
        .tags-container {
            position: absolute;
            right: 0;
            top: @baseSpacing;

            &:before {
                .linear-gradient-horizontal(fade(@contentBackgroundColor, 0), @contentBackgroundColor);
                bottom: 0;
                display: block;
                content: "";
                left: -@fade-out-width;
                position: absolute;
                top: 0;
                width: @fade-out-width;
            }
        }

        .tag {
            .border-radius();
            .text-overflow();
            background-color: @primaryHighlight;
            border: 1px solid @dividerColor;
            color: @labelTextColor;
            display: block;
            font-family: @monospaceFontStack;
            font-size: @font-size-small;
            max-width: @max-width;
            padding: 0 @halfSpacing;

            > .aui-icon {
                margin-right: @halfSpacing;
            }

            > a {
                color: inherit;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    tr {
        &.focused-commit,
        &:hover {
            .message .tags-container:before {
                .linear-gradient-horizontal(fade(@bodyBackgroundColor, 0), @bodyBackgroundColor);
            }
        }
    }
}
