{% include "css/mod/base.css" %}

#packageLabelContent {
    > div:nth-of-type(1) {
        padding: 7% 7% 0 7%;
        color: var(--c-text);
    }

    h1 {
        margin: 0;
        line-height: 100%;
    }

    input {
        background: none;
        color: var(--c-text);
        border: 1px solid var(--c-lines);
        padding: 2%;
        margin: 2% 0 2% 0;
        font-size: 150%;
        font-family: 'Courier';

        &.{{ state.error }} { outline: 2px solid red !important; }
        &:focus { outline: none; }
    }

    input[type=submit] {
        cursor: pointer;
        transition: background-color 0.15s ease-in-out;

        &:hover { background-color: var(--c-login-hover); }

        /* Button off. */
        color: var(--c-null-text);
        border-style: dashed;
        pointer-events: none;

        &.{{ state.button_on }} {
            color: var(--c-text);
            border-style: solid;
            pointer-events: auto;
        }

        &.{{ state.loading }} {
            border: 1px solid transparent;
            background: linear-gradient(var(--c-label), var(--c-label)) padding-box, conic-gradient(
                            from var(--angle),
                            var(--c-lines) 0% 30%,
                            var(--c-loading) 30% 50%,
                            var(--c-lines) 50% 80%,
                            var(--c-loading) 80% 100%
                        ) border-box;
            animation: 1.5s rotate linear infinite;
            cursor: not-allowed;
        }
    }

    #repoSelect {
        border-bottom: 2px solid var(--c-lines);

        #repoSelectInput { margin-bottom: 0; }
        #repoSelectButton { float: right; }

        #repoSelectError {
            line-height: 100%;
            height: 3rem;
            margin: 2% 0 2% 0;
        }
    }

    #repoInfo {
        margin-top: 2%;
        transition: opacity 0.15s ease-in-out;

        > h1:first-child { margin-top: 4%;}

        #repoActions {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        #repoLinkInput::selection { background-color: transparent; }
        #repoLinkButton { float: right; }

        #repoFeatures {
            margin-top: 2%;
            transition: opacity 0.15s ease-in-out;

            #featureBox {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                align-items: center;

                > .feature {
                    margin-right: 2%;
                    font-weight: 800;
                    pointer-events: auto;

                    /* Feature off */
                    color: var(--c-null-text);
                    border-style: dashed;

                    &.{{ state.feature_on }} {
                        color: var(--c-text);
                        border-style: solid;
                    }
                }
            }
        }
    }

    #confirmOverlay {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);

        position: absolute;
        left: 0;
        z-index: 10;

        transition: opacity 0.15s ease-in-out;

        /* Confirm off */
        pointer-events: none;
        top: 100%;
        opacity: 0;

        &.{{ state.confirm_on }} {
            pointer-events: auto;
            top: 0;
            opacity: 1;
        }

        > div {
            margin: 30% auto 0 auto;

            width: 80rem;
            height: 30rem;

            outline-width: 5rem;
            outline-style: solid;
            outline-color: var(--c-label);

            border-radius: 12px;
            background-color: var(--c-label);
            border: 0.5rem solid var(--c-lines);

            transition: background-color 0.15s ease-in-out,
                        border 0.15s ease-in-out,
                        outline-color 0.15s ease-in-out;

            > div {
                padding: 7%;

                > input[type=submit] { float: right; }
            }
        }

    }

    /* Repo selected and created states. */
    #repoInfo, #repoFeatures {
        opacity: 0;
    }

    #repoInfo.{{ state.repo_selected }}, #repoFeatures.{{ state.repo_created }} {
        opacity: 1
    }
}