/* customize colors */
@media (prefers-color-scheme: light) {
    :root {
        --l: 33%;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --l: 66%;
    }
}

:root {
    --h: 0;
    --s: 56%;
    --color-primary: hsl(var(--h),var(--s),var(--l));
    --color-primary-dark-2: hsl(var(--h),var(--s),calc(var(--l) - 20%/2));
    --color-primary-dark-3: hsl(var(--h),var(--s),calc(var(--l) - 30%/2));
    --color-primary-dark-4: hsl(var(--h),var(--s),calc(var(--l) - 40%/2));
    --color-primary-dark-5: hsl(var(--h),var(--s),calc(var(--l) - 50%/2));
    --color-primary-dark-6: hsl(var(--h),var(--s),calc(var(--l) - 60%/2));
    --color-primary-dark-7: hsl(var(--h),var(--s),calc(var(--l) - 70%/2));
    --color-primary-light-2: hsl(var(--h),var(--s),calc(var(--l) + 20%/2));
    --color-primary-light-3: hsl(var(--h),var(--s),calc(var(--l) + 30%/2));
    --color-primary-light-4: hsl(var(--h),var(--s),calc(var(--l) + 40%/2));
    --color-primary-light-5: hsl(var(--h),var(--s),calc(var(--l) + 50%/2));
    --color-primary-light-6: hsl(var(--h),var(--s),calc(var(--l) + 60%/2));
    --color-primary-light-7: hsl(var(--h),var(--s),calc(var(--l) + 70%/2));
}

/* override --color-green */
.home a,
.home .hero .svg {
    color: var(--color-primary);
}

/* adapt private repos list and file list hover background color */
.feeds .list ul li.private,
.repository.file.list #repo-files-table tr:hover {
    background-color: hsla(var(--h),var(--s),var(--l),0.1);
}

/* hide 'Explore' menu item */
.ui.secondary.menu a.item[href="/explore/repos"] {
    display: none;
}

/* de-emphasize regular login button */
form[action="/user/login"] button.ui.green.button {
    border: none;
    background-color: var(--color-box-body);
    color: var(--color-text);
}

/* emphasize oauth cloud login button */
form[action="/user/login"] #oauth2-login-navigator a {
    display: block;
    padding: 1em 5em;
    background-color: var(--color-primary);
    color: var(--color-text-focus);
    border-radius: 0.5em;
}
form[action="/user/login"] #oauth2-login-navigator p {
    margin-right: 0;
    float: none;
    color: #000;
    font-weight: bold;
}
form[action="/user/login"] #oauth2-login-navigator p:after {
    content: " HäMa Cloud:";
}