:root {
    --mattress-columns: 1;
    --mattress-list-col-gap: 0.5em;
    --mattress-list-row-gap: 0.5em;
    --mattress-side-padding: 0.5ch;
    --mattress-border-radius: var(--mattress-side-padding);
}

#mattresses {
    width: 100%;
}

#mattressList {
    display: flex;
    flex-flow: row wrap;

    width: calc(100% - 2*1em);
    padding: 1em;
    column-gap: var(--mattress-list-col-gap);
    row-gap: var(--mattress-list-row-gap);
}

#mattressButtonContainer {
    display: flex;
    flex-flow: row wrap;
    column-gap: 1em;
}

#newMattressFormSubmitContainer {
    flex-flow: row nowrap;
}
#newMattressSubmit {
    margin-left: auto;
    margin-right: auto;
}
#newMattressSubmit, #newMattressDelete {
    width: 45%;
    min-width: unset;
}
#newMattressDelete {
    border-color: var(--negative-currency-foreground);
}
#newMattressDelete:hover {
    background-color: var(--negative-currency-foreground);
}

#mattressTransferButton {
    height: 3em;
}
#mattressTransferButton > img {
    height: 100%;
    width: 100%;
}

div.mattressContainer {
    display: flex;
    flex-flow: row nowrap;
    column-gap: 0.5ch;

    width: calc((100% / var(--mattress-columns)) -
        ((var(--mattress-columns) - 1 ) * var(--mattress-list-col-gap) / var(--mattress-columns)) -
        2 * var(--mattress-side-padding) - 1px);

    border-radius: var(--mattress-border-radius);
    padding: 0 var(--mattress-side-padding);
}
div.mattressContainer.unallocated {
    font-weight: bold;
}
div.mattressContainer:hover {
    background: var(--background-color-card-l2);
    cursor: pointer;
}
div.mattressContainer.unallocated:hover {
    cursor: default;
}

div.mattressContainer > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
div.mattressContainer > span.mattressTitle {
    width: 15ch;
    text-align: left;
}

div.mattressContainer > span.mattressAmounts {
    width: 11ch;
    text-align: right;
}
div.mattressContainer > span.mattressAmounts.unallocatedMattressMaxAmount {
    /* Approximately same width as two span.mattressAmounts
     * plus three gaps plus the edit icon.
    **/
    width: calc(22ch + 1em);
}

div.mattressContainer > div.mattressBar {
    display: flex;
    flex-flow: row-reverse nowrap;

    width: 10ch;

    flex-grow: 1;

    margin-left: auto;
    margin-right: auto;

    border: solid 1px black;
    border-radius: 0.5em;
}
div.mattressContainer.unallocated > div.mattressBar {
    border: none;
}

div.mattressContainer > img.mattressEditButton {
    width: 1em;

    margin-left: auto;
    margin-right: auto;

    cursor: pointer;
}