/* Controls */

button {
    border: 1px solid var(--color-info);
    border-radius: var(--border-radius);
    padding: 0.2rem;
    color: var(--color-info);
    font-size: var(--font-size-small);
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
}
button:hover, .datepicker-input:hover {
    background-color: var(--color-info);
    color: var(--color-blank);
}

input,
textarea {
    display: block;
    border-radius: var(--border-radius);
    padding: var(--standard-padding);
    background-color: var(--color-blank);
    width: 100%;
}


select {
    border: 1px solid var(--color-info);
    border-radius: var(--border-radius);
    padding: var(--standard-padding);
    background-color: transparent;
    cursor: pointer;
}


/* Growable Textareas */

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
    flex-grow: 1;
}

.grow-wrap::after {
    /* Note the weird space! Needed to prevent jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}

.grow-wrap>textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;

    cursor: text;
    flex-grow: 1;
}
.grow-wrap>textarea::placeholder {
    color: var(--color-disabled);
}

.grow-wrap>textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    border: 1px solid black;
    padding: 0.5rem;
    margin: var(--double-padding);
    width: calc(100% - 2 * var(--double-padding));
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
    flex-grow: 1;
}