/* Most of the CSS we need is provided by main.css, which is a symlink to the
CSS from the blog. This file provides additional styles peculiar to the
guestbook. */

:root {
    --crimson: #a3112e;
    --winner: #3b6109;
}

button,
input[type="button"],
input[type="submit"] {
    border: 1px solid #bbb;
    border-radius: var(--spacing-unit);
    font-size: smaller;
    font-family: inherit;
    background-color: white;
    height: 1.2rlh;
    align-content: center;

    &:hover {
        box-shadow: 0 0 2px;
    }

    &:active {
        box-shadow: inset 0 0 2px;
    }
}

form.admin-login {

    input[type="email"],
    input[type="password"] {
        margin: var(--spacing-unit) 0;
        width: 100%;
        max-width: 200px;
    }
}

.trix-content {

    /* trix content uses a <div> instead of a <p>; make the spacing match */
    div {
        margin: calc(2*var(--spacing-unit)) 0;
    }
}

.note-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--spacing-unit)
}

.swatch {
    width: 1lh;
    height: 1lh;
    box-sizing: border-box;
    display: inline-block;
    border-radius: var(--spacing-unit);
}

.danger {
    color: var(--crimson);
    border-color: var(--crimson);
}

.good {
    color: var(--winner);
    border-color: var(--winner);
}

ul.note-meta {
    margin: var(--spacing-unit) 0;
    list-style-type: none;
    padding: inherit;

    li {
        display: inline-block;
    }

    li:not(:first-child)::before {
        content: "\00a0|\00a0";
    }
}

.form-message {
    border: 1px solid;
    padding: 0 var(--spacing-unit);
    margin: var(--spacing-unit) 0;
}

.form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(3 * var(--spacing-unit));
    align-content: space-around;
    align-items: center;
    margin: var(--spacing-unit) 0;
    border: 1px solid #bbbbbb;

    label {
        display: block;
    }

    legend {
        color: #bbbbbb;
    }

    input[type=color] {
        padding: 0;
        border: 0;
        /* A little bigger for empathis */
        width: 1.2lh;
        height: 1.2lh;

        &:hover {
            box-shadow: 0 0 2px;
        }
    }

    @media screen and (max-width: 500px) {
        & {
            grid-template-columns: auto;
            gap: var(--spacing-unit);

            label {
                margin-top: calc(3 * var(--spacing-unit));
            }
        }
    }
}

.form-message,
.form-grid,
trix-editor.trix-content,
input[type=text] {
    border-radius: 2px;
}

.form-message.form-admin ul {
    list-style-type: none;
    padding: inherit;

    display: inline-flex;
    gap: var(--spacing-unit);
}

trix-toolbar button.trix-button,
trix-editor {
    background: white;
}