/**
 * Copyright (c) Enalean, 2016-Present. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

@use "sass:map";
@use "pkg:@tuleap/tlp-swatch-colors";
@use "../../case";

/* stylelint-disable-next-line selector-no-qualifying-type */
body.openid-connect-link {
    background: linear-gradient(#ffffff 0%, #f5f5f5 75%);
    text-align: center;
}

#login-box > #login-openid-title {
    margin: 10px 0 30px;
    font-size: 30px;
}

#providers-configuration {
    .modal {
        .modal-header {
            border-bottom: 2px solid #888888;
        }

        .modal-body {
            max-height: none;

            label,
            > .preview-label {
                margin-bottom: 2px;
                color: #555555;
                font-size: 12px;
                font-weight: 600;
            }

            input {
                box-sizing: border-box;
                width: 100%;
                height: 35px;
            }

            .info {
                margin: 0 0 5px;
                color: #4db3d0;
                font-size: 12px;

                &.provider-callback-url {
                    margin: 0 0 15px;
                    font-weight: 600;
                }
            }

            .provider-name,
            .provider-user-info-endpoint {
                margin: 0 0 30px;
            }

            > .preview-label {
                margin: 30px 0 5px;
            }

            > .provider-button-preview {
                padding: 20px;
                border: 1px solid #ededed;
                border-radius: var(--tlp-medium-radius);
                background: #f3f3f3;
                text-align: center;

                > a {
                    box-sizing: border-box;
                    padding: 20px;
                    font-size: 20px;
                    line-height: normal;

                    /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors */
                    > i {
                        margin: 0 3px 0 0;
                        font-size: 18px;
                    }
                }
            }

            .highlight {
                color: #ff0000;
            }
        }
    }

    #providers {
        display: flex;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 30px 0 0;

        .provider {
            display: flex;
            position: relative;
            box-sizing: border-box;
            flex-direction: column;
            width: 370px;
            margin: 0 30px 30px 0;
            border: 1px solid #ededed;
            border-radius: var(--tlp-medium-radius);

            > .provider-background-icon {
                position: absolute;
                z-index: -1;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 0.03;
                font-size: 200px;
            }

            > h3 {
                flex: 0 0 auto;
                margin: 0;
                padding: 13px 10px;
                border-bottom: 2px solid #333333;
                background: #eeeeee;
                font-size: 16px;
                line-height: normal;

                > .provider-icon {
                    margin: 0 2px 0 0;
                    font-size: 16px;
                }
            }

            > .provider-endpoint,
            > .provider-client {
                flex: 1 1 auto;
                padding: 10px;
                border-bottom: 1px solid #ededed;

                /* stylelint-disable selector-no-qualifying-type */
                > span {
                    display: block;
                    font-size: 13px;
                    word-wrap: break-word;

                    /* stylelint-disable-next-line max-nesting-depth */
                    &.provider-label {
                        margin: 10px 0 0;
                        color: #888888;
                        font-size: 11px;
                        font-weight: 600;

                        /* stylelint-disable-next-line max-nesting-depth */
                        &:first-child {
                            margin: 0;
                        }
                    }
                }
                /* stylelint-enable */
            }

            > .provider-actions {
                flex: 0 0 auto;
                padding: 10px;
                background: #f6f6f6;
                text-align: right;

                > form {
                    display: inline-block;
                    margin: 0;
                }
            }
        }
    }
}

#login-openid-providers,
#login-openid-register {
    .login-openid-or {
        display: block;
        position: relative;
        height: 100px;
        color: #bbbbbb;
        font-size: 12px;

        > span {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            padding: 0 10px;
            transform: translate(-50%, -50%);
            background: #ffffff;
            white-space: nowrap;
        }

        &::before {
            content: "";
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #f1f1f1;
        }
    }

    #login-openid-register-button {
        display: block;
        box-sizing: border-box;
        margin: 0;
        padding: 15px 5px;
        font-size: 20px;
        line-height: normal;
    }

    #login-openid-providers-list {
        > a {
            display: block;
            box-sizing: border-box;
            width: 50%;
            margin: 0 auto 10px;
            padding: 18px 5px;
            font-size: 16px;
            line-height: normal;

            > i {
                margin: 0 3px 0 0;
                font-size: 18px;
            }
        }

        > a:first-child:nth-last-child(1) {
            width: 100%;
            margin: 0;
        }

        > a:first-child:nth-last-child(2),
        > a:first-child:nth-last-child(2) ~ a {
            display: inline-block;
            width: 49%;

            &:first-child {
                margin: 0 1% 0 0;
            }

            &:last-child {
                margin: 0 0 0 1%;
            }
        }

        > a:first-child:nth-last-child(4),
        > a:first-child:nth-last-child(4) ~ a {
            display: inline-block;
            width: 49%;

            &:nth-child(2n + 1) {
                margin: 0 1% 10px 0;
            }

            &:nth-child(2n) {
                margin: 0 0 10px 1%;
            }
        }
    }
}

.provider-select2-select {
    display: block;

    .select2-choice {
        box-sizing: border-box;
        height: 35px;
        border: 1px solid #cccccc;

        > div {
            width: 20px;
            border-left: 1px solid #cccccc;

            > b {
                background-position: 2px 4px;
            }
        }
    }

    &.provider-icon-selector .select2-choice {
        padding: 4px 0;
        text-align: center;

        > span {
            margin-right: 20px;

            > i {
                font-size: 26px;
            }
        }
    }

    &.provider-color-selector .select2-choice {
        padding: 0;
        overflow: visible;

        > span {
            height: 100%;
            margin-right: 19px;
            border-top-left-radius: var(--tlp-medium-radius);
            border-bottom-left-radius: var(--tlp-medium-radius);

            > span {
                @extend %colors;

                display: block;
                height: 100%;
                margin: 0;
            }
        }
    }

    &.select2-dropdown-open .select2-choice > div > b {
        background-position: -16px 4px;
    }
}

.provider-select2-dropdown {
    > .select2-search {
        display: none;
    }

    // stylelint-disable-next-line selector-no-qualifying-type
    > ul.select2-results {
        text-align: center;

        > li:first-child {
            height: 25px;
        }

        > li span {
            @extend %colors;

            display: block;
            height: 25px;
        }

        i {
            font-size: 26px;
        }
    }
}

%colors {
    @each $color-name, $colors in tlp-swatch-colors.$color-map {
        .#{case.to-snake-case($color-name)} {
            background: #{map.get($colors, "primary")};
        }
    }
}
