:root {
    --primary-bg-color: #0d1117;
    --bg-muted: #388bfd1a;
    --card-color: #151b23;
    --card-hover: #388bfd1a;
    --control-hover: #656c7633;
    --text-color: #f0f6fc;
    --text-muted: #9198a1;
    --border-color: #3d444d;
    --border-accent: #1f6feb;
    --merge-icon: #3fb950;
}

body {
    background-color: var(--primary-bg-color);
    color: var(--text-color);
    margin: 2rem 15%;
    font-family: system-ui;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

button {
    all: unset;
    background-color: var(--bg-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    cursor: pointer;

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

h1 {
    margin-top: 4rem;

    &:first-child {
        margin-top: 0;
    }
}

.pr {
    display: grid;
    grid-template-columns: 6fr 2fr 3fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--card-color);
    border: 1px solid var(--border-color);
    border-bottom: none;
    align-items: center;

   .pr-number {
       color: var(--text-muted);
   }

    .repository {
        display: flex;
        gap: 0.5rem;
        min-width: 0;
        align-items: center;

        .details {
            min-width: 0;
        }

        svg {
            width: 18px;
            height: 18px;
        }

        & a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
    }

    .user {
        min-width: 0;
        & * {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        small {
            color: var(--text-muted);
        }
    }

    .time-since {
        color: var(--text-muted);
        justify-self: end;
    }

    .controls {
        display: none;
        justify-self: end;
    }

    &:first-child {
        border-radius: 0.25rem 0.25rem 0 0;
    }

    &:last-child {
        border-radius: 0 0 0.25rem 0.25rem;
        border-bottom:  1px solid var(--border-color);
    }

    &:hover {
        background-color: var(--card-hover);
        box-shadow: 2px 0 0 var(--border-accent)inset;

        .time-since {
            display: none;
        }

        .controls {
            display: unset;
        }
    }
}

.labels {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.label {
    background-color: color-mix(in srgb, var(--label-color) 30%, transparent 70%);
    color: color-mix(in srgb, oklch(from var(--label-color) calc(l + 0.4) c h) 80%, transparent 20%);
    border: 1px solid color-mix(in srgb, oklch(from var(--label-color) calc(l + 0.4) c h) 20%, transparent 80%);
    padding: 0.25rem 0.4rem;
    border-radius: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.empty {
    color: var(--text-muted);
}