/*
 * Copyright (c) 2022 Philipp Schafft
 *
 * This file is part of Star-Otter.
 *
 * This program 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 3 of the License, or (at your option) any later version.
 *
 * This program 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 this program.
 * If not, see <https://www.gnu.org/licenses/>.
 */

:root {
    --standard-padding: 3px;
    --border-colour: darkgrey;
}

body {
    background-color: #c0c0c0;
    color: black;
    margin: 0;
}

header > div, header > div > form {
    display: flex;
}

header > div {
    margin: 0;
    padding: var(--standard-padding);
    border-bottom: 3px ridge var(--border-colour);
}

.flex-grow {
    flex-grow: 1;
}

label {
    padding: 0 var(--standard-padding) 0 0;
}

main > section {
    padding: var(--standard-padding);
}

main > section:not(:last-child) {
    border-bottom: 1px solid var(--border-colour);
    margin-bottom: calc(2 * var(--standard-padding));
}

.button-box > div {
    font-size: larger;
    padding: 0 var(--standard-padding) 0 0;
}

*[onclick], .clickable {
    cursor: pointer;
}

h1, h2 {
    margin: 0 0 var(--standard-padding);
    padding: 0 0 0 var(--standard-padding);
}

h1 {
    border-left: 1px solid var(--border-colour);
    border-bottom: 1px solid var(--border-colour);
    display: inline-block;
}

.relations-overview {
    margin: 0 0 var(--standard-padding);
}
.relations-overview > dl {
    display: flex;
    margin: 0;
}

.relations-overview > dl > * {
    margin: 0;
    padding: var(--standard-padding);
}

.relations-overview > dl > dt {
    font-weight: bold;
}

.relations-container ul {
    margin: 0;
}

.favicon {
    max-width: 32px;
    max-height: 32px;
}

.colour-chip {
    display: inline-block;
    border: 2px outset black;
    border-radius: 5px;
    width: 1em;
    height: 1em;
}

*[data-nullable]:empty::after {
    opacity: 30%;
    content: "unset";
}