body,
html {
    margin: 0;
    padding: 0;

    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    color: #bac0c9;
    background-color: #151b23;
    border-color: #3d444d;

    width: 100%;
    height: 100%;
}

@property --100vw {
    syntax: "<length>";
    initial-value: 0px;
    inherits: true;
}

@property --base-width {
    syntax: "<length>";
    initial-value: 0px;
    inherits: true;
}

@property --main-padding {
    syntax: "<length>";
    initial-value: 0px;
    inherits: true;
}

@property --pr-gap {
    syntax: "<length>";
    initial-value: 0px;
    inherits: true;
}

:root {
    --100vw: 100vw;
    --base-width: 20em;
    --main-padding: 1em;
    --pr-gap: 1em;

    --nav-height: 4.5em;
    @media (width > 40em) {
        --nav-height: 3em;
    }
}

a {
    text-decoration: none;
    color: #bac0c9;
}

nav {
    display: grid;
    grid-template-areas:
        "change-username change-username change-username change-username reset"
        "refresh          refresh         refresh        refresh         logout";

    flex-direction: column;
    height: unset;
    gap: 0.5em;

    @media (width > 24em) {
        height: var(--nav-height);
        flex-direction: row;
        display: flex;
        gap: 0.25em;
    }

    align-items: end;

    @media (width > 40em) {
        align-items: center;
        gap: 1em;
    }

    padding: 0em var(--main-padding);

    font-size: smaller;
    @media (width > 30em) {
        font-size: small;
    }
    @media (width > 55em) {
        font-size: inherit;
    }

    .backend-status {
        align-self: center;
        grid-area: refresh;
    }

    .divider {
        display: none;
        margin-left: auto;
        @media (width > 30em) {
            display: block;
        }
    }

    .logout {
        grid-area: logout;
    }
}

button,
.logout,
input {
    all: unset;
    background-color: #212830;
    border-radius: 0.5em;
    border: 0.05rem solid;
    padding: 0.5em 1em;
    cursor: pointer;
}

input {
    cursor: text;
}

main {
    display: flex;
    flex-direction: column;

    padding: var(--main-padding);
}

.prs {
    gap: var(--pr-gap);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    --actual-gap: calc(var(--pr-gap));
    --actual-padding: calc(var(--main-padding));
    --element-width: calc(var(--base-width) + 2px);

    --total-padding: calc(var(--actual-padding) * 2);
    --available-width: calc(
        var(--100vw) - var(--total-padding) + var(--actual-gap)
    );
    --number-on-screen: calc(
        tan(
            atan2(
                var(--available-width),
                var(--element-width) + var(--actual-gap)
            )
        )
    );

    --rounded-number-on-screen: calc(round(down, var(--number-on-screen)));
    --base-width-on-screen: calc(
        (var(--rounded-number-on-screen) * (var(--element-width))) +
            ((var(--rounded-number-on-screen) - 1) * var(--actual-gap))
    );

    --empty-space: calc(
        (var(--100vw) - var(--total-padding)) - var(--base-width-on-screen)
    );
    --empty-space-per-element: calc(
        var(--empty-space) / var(--rounded-number-on-screen)
    );

    --pr-width: calc(var(--element-width) + var(--empty-space-per-element));
}

.rollup {
    background: repeating-linear-gradient(
        135deg,
        color-mix(in hsl, #151b23, white 5%),
        color-mix(in hsl, #151b23, white 5%) 20px,
        color-mix(in hsl, #151b23, black 0%) 20px,
        color-mix(in hsl, #151b23, black 0%) 40px
    );

    border: 0.05rem solid;
    border-radius: 1em;
    padding: 0.5em;
    box-sizing: border-box;

    --width-in-elems: calc(
        min(var(--num-prs-in-rollup), var(--rounded-number-on-screen))
    );
    --rollup-width: calc(
        (var(--width-in-elems) * var(--pr-width)) +
            ((var(--width-in-elems) - 1) * var(--actual-gap))
    );
    width: var(--rollup-width);

    .pr {
        width: unset;
    }

    h4 {
        margin: 0em;
        margin-bottom: 0.2em;
        margin-left: 0.2em;
    }

    .contents {
        display: grid;
        grid-template-columns: repeat(var(--width-in-elems), minmax(17em, 1fr));
        gap: 1em;
    }
}

.pr {
    width: var(--pr-width);

    background-color: #212830;
    border-radius: 0.5em;
    border: 1px solid;

    box-sizing: border-box;
    padding: 0.25em 1em;
    padding-bottom: 1em;

    min-height: 10em;

    display: flex;
    flex-direction: column;
    gap: 0;

    position: relative;

    h2 {
        font-size: medium;
        margin-bottom: 0;
    }

    .pr-link {
        margin-top: 0;
        font-size: small;
        margin-bottom: 1em;
    }
}

.author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;

    .avatar {
        height: 1em;
        aspect-ratio: 1/1;
        vertical-align: middle;
        display: inline-block;
    }
}

.fields {
    margin-top: auto;
    margin-bottom: 1em;

    .field {
        font-size: small;

        display: flex;
        flex-direction: row;
        width: 100%;

        .value {
            margin-left: auto;
        }
    }
}

.badges {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: x-small;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0.5em;
    gap: 0.5em;

    .ci-status {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 1em;

        &.good {
            color: #347d39;
            font-size: medium;
        }

        &.progress {
            color: #c69026;
            font-size: medium;
        }

        &.bad {
            color: #c93c37;
            font-size: medium;
        }
    }

    .status-badge {
        background: rgba(247, 225, 1, 0.18);
        border-color: rgb(244, 219, 1);
        color: rgb(244, 219, 1);
        border: 0.005rem solid;

        padding: 0.2em 0.5em;
        border-radius: 0.8em;

        display: flex;
        align-items: center;

        line-height: 1em;
    }
}

.home {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .login {
        background-color: #212830;
        border-radius: 0.5em;
        border: 1px solid;
        padding: 2em;

        .button-container {
            display: flex;
            flex-direction: column;
            align-items: center;

            a {
                border-radius: 0.5em;
                padding: 0.5em 1em;
                background: #347d39;
            }
        }
    }
}

#change-userame-reset {
    grid-area: reset;
}

#change-username {
    display: flex;

    align-items: end;
    flex-direction: column;

    grid-area: change-username;

    @media (width > 40em) {
        align-items: center;
        flex-direction: row;
    }

    input {
        width: 100%;
        box-sizing: border-box;
        @media (width > 40em) {
            width: unset;
        }
        @media (width > 24em) {
            width: 10em;
        }
    }

    gap: 0.25em;
    position: relative;

    #suggestions-popup {
        box-sizing: border-box;
        margin: 0;

        z-index: 10;

        background-color: #151b23;
        border-radius: 0.5em;
        border: 1px solid;

        position: absolute;
        display: none;

        flex-direction: column;
        gap: 0.3em;
        padding: 1em;

        left: 0;
        width: 100%;
        @media (width > 24em) {
            right: 0;
            width: unset;
        }
        top: var(--nav-height);

        .username-suggestion {
            height: 1.5em;
            cursor: pointer;
        }
        .username-suggestion[aria-selected="true"] {
            background-color: #212830;
        }
    }
}