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

// these MUST match the variables as set in importer.js Sources
@bitbucketCloud: 'BITBUCKET_CLOUD';
@git: 'GIT';
@github: 'GITHUB';

.repository-import-page {
    .source-form {
        display: none;

        &.active {
            display: block;
        }
    }

    .progress-page .info-message {
        font-size: @font-size-small;
        color: @secondaryTextColor;
        margin-bottom: 0;
    }

    @buttonSize: 100px;
    @buttonSpacing: @baseSpacing;

    #import-source {
        .aui-button ~ .aui-button {
            margin-left: @buttonSpacing; // This is the default - copied here to use the buttonSpacing variable
        }

        button {
            background: none; // This must be before the other background rules, do not move!
            background-position: @doubleSpacing @baseSpacing;
            background-repeat: no-repeat;
            color: @secondaryTextColor;
            display: inline-block;
            font-size: @font-size-small;
            height: @buttonSize;
            padding-top: 70px; // average height for logos
            vertical-align: bottom;
            white-space: normal;
            width: @buttonSize;

            &.active {
                background-color: @primaryActiveColor;
                border: 1px solid @primaryActiveBorderColor;
                box-shadow: none;

                &:hover,
                &:active,
                &:focus {
                    border: 1px solid @primaryHighlightColor;
                }
            }

            &[data-source=@{bitbucketCloud}] {
                @logoWidth: 42px;
                background-size: @logoWidth;
                background-position: (@buttonSize - @logoWidth)/2 @baseSpacing;
                background-image: url(logo-bitbucket.svg);
                padding-top: 60px; // needed because "Bitbucket Cloud" is two lines long
            }

            &[data-source=@{github}] {
                @logoWidth: 50px;
                background-image: url(logo-github.svg);
                background-position: (@buttonSize - @logoWidth)/2 @baseSpacing;
                background-size: @logoWidth;
            }

            &[data-source=@{git}] {
                @logoWidth: 50px;
                background-image: url(logo-git.png);
                background-position: (@buttonSize - @logoWidth)/2 @baseSpacing;
                background-size: @logoWidth;
            }
        }

    }

    form.aui {
        @inputDistanceFromEdge: 165px;
        .field-group,
        .group {
            padding-left: @inputDistanceFromEdge;

            &.error input {
                border: 1px solid @errorTextColor;
            }

            & > label,
            & > aui-label {
                color: @labelTextColor;
                margin-left: -@inputDistanceFromEdge;
                width: 150px; // Github's "personal access token" doesn't fit in the normal space
                              // the label will wrap text if required for other languages
            }
        }

        .long-field {
            max-width: @buttonSize*3 + @buttonSpacing*2;
        }

        .next-step .buttons-container {
            padding-left: @inputDistanceFromEdge;
        }
    }

    #github-source-type {
        label span {
            color: @secondaryTextColor;
        }
    }

    .import-page-body,
    .next-step {
        border-top: 1px solid @dividerColor;
        margin-top: @doubleSpacing;
        padding-top: @doubleSpacing;
    }

    .select-repositories {
        fieldset.group {
            padding-left: 0;
            clear: none;
        }
    }

    .spinner-button {
        display: inline-block;
        margin-right: 9px; // matches AUI's margin
        position:relative;

        &.spinning {

            input,
            input:hover,
            input:focus {
                color: transparent;
                background-color: @adg-color-bright-blue-1;
                cursor: default;
            }

            .spinner {
                .square(@spinner-size-small);
                position: absolute;
                left: 50%;
                top: 50%;
            }
        }
    }

}
