.quest .edit-details-section
{
    padding-top: 1em;
}

.quest .delete-quest-button
{
    margin-top: 1em;
}

.quest .planned-date
{
    margin-top: 1em;
}

.quest .icon-text-button,
.quest .icon-button:not(.block-button)
{
    padding: 7px 10px;
}

.quest button.selected
{
    background-color: var(--active-background-color);
}

.quest button .abbreviated-text
{
    display: none;
}

@media (width < 540px)
{
    /* Temporarily do this to make it fit on my phone
       The idea was originally to remove this when I would merge the inbox with
       the edit mode (because I would no longer need the edit button, freeing up
       space to move the buttons around, but I do actually kind of like it this way.
       Maybe I will still use vw to do this instead so it's not a hard line, but
       a gradual change. Or maybe it's a hard line either way because of switching
       to abbriations, and I should keep it this way. I don't know yet. */
    .quest .icon-text-button,
    .quest .icon-button:not(.block-button)
    {
        padding: 5px 5px;
    }

    .quest button .abbreviated-text
    {
        display: inline;
    }

    .quest button .text.has-abbreviation
    {
        display: none;
    }
}

.quest .icon-text-button svg,
.quest .icon-button:not(.block-button) svg
{
    width: 20px;
    height: 20px;

    vertical-align: middle;
}

.quest .icon-text-button .text,
.quest .icon-text-button .abbreviated-text
{
    position: relative;
    top: 2px;
}

.quest input.quest-name,
.quest input.task-name,
.quest .reward input.reward-name,
.quest .deadline input
{
    width: 100%;
    border-style: none;
    border-bottom-style: solid;
    border-color: transparent;
    padding: 0;
}

.quest .quest-name:not(input),
.quest .task-name:not(input)
{
    /* Keeping layout the same for the input and non-input versions */
    border-color: transparent;
    border-width: 1px;
    border-bottom-style: solid;
}

.quest input.quest-name:focus,
.quest input.task-name:focus,
.quest .reward input.reward-name:focus,
.quest .deadline input:focus
{
    outline: none;
    border-color: var(--text-main-color);
}

.quest .quest-name
{
    font-size: 110%;
}

.quest .reward,
.quest .deadline
{
    display: flex;
    gap: 1em;
    align-items: center;
}

.quest .reward .reward-name,
.quest .deadline datetime-input
{
    flex-grow: 1;
}

.quest .columns
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 2em;
}

.quest .column.right
{
    width: min(20em, 100%);
}

.quest .add-menu
{
    position: absolute;
    z-index: 20;
    background-color: var(--block-background-color);

    border-color: var(--border-color);
    border-width: 1px;
    border-style: solid;
}

.quest .add-menu button
{
    display: block;
    margin: 0;

    border-style: none;
    border-radius: 0;
    width: 100%;
}

.quest .add-menu button:not(:last-child)
{
    border-bottom-style: solid;
}