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

.repository-list {
    border-right: 1px solid @dividerColor;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;

    // On Retina screens this will show just a shadow on the bottom
    // and will only be updated when a repaint occurs.
    // https://bugs.chromium.org/p/chromium/issues/detail?id=568847
    background: linear-gradient(@primaryHighlight 30%, rgba(245, 245, 245, 0)),
    linear-gradient(rgba(245, 245, 245, 0), @primaryHighlight 70%) 0 100%,
    radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background: linear-gradient(@primaryHighlight 30%, rgba(245, 245, 245, 0)),
    linear-gradient(rgba(245, 245, 245, 0), @primaryHighlight 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;

    background-repeat: no-repeat;
    background-color: @primaryHighlight;
    background-size: 100% 20px, 100% 20px, 100% 5px, 100% 5px;
    background-attachment: local, local, scroll, scroll;

    li {
        border-bottom: 1px solid @dividerColor;
        border-left: 1px solid @dividerColor;
        border-top: 1px solid transparent;

        &:first-child {
            border-top-color: @dividerColor
        }

        label {
            display: block;
            padding: (@halfSpacing + 2) @halfSpacing (@halfSpacing + 1);
            margin: -2px 0 -1px; // collapses the borders
            position: relative;
        }

        input {
            margin-right: @baseSpacing;
        }

        &.focused,
        &:hover {
            label {
                &:before {
                    display: block;
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -1px;
                    width: 2px;
                    height: 100%;
                    background-color: @primaryHighlightColor;
                }
            }
        }

        &.error {
            padding-top: @halfSpacing - 1px; // -1 because aui field groups have 1px margin
            background-color: @aui-panel-bg-color;
            border: 0;
        }
    }

    + .spinner {
        .square(@spinner-size-small);
        margin: 0 0 0 -@spinner-size-small;
        position: absolute;
        bottom: -(@spinner-size-small);
        left: 50%;
    }

}

