.toy {
    box-sizing: border-box;
    margin: 1vh 1vw;
    display: flex;
    flex-flow: column nowrap;
    height: calc(100% - 1vh);
}

.toy .poem-container-field {
    flex: 1 0 auto;
    padding: 20px calc(50% - 270px);
}

.poem-container {
    height: 100%;
    box-sizing: border-box;
    background-color: var(--dark-antimani);

    padding: 10px;

    border: var(--border-thin);
    border-radius: 10px;

    white-space: break-spaces;

    display: flex;
    flex-direction: column;
}

.poem-text-box {
    flex: 1 0 auto;
    background-color: ghostwhite;

    /*cursor: url(./assets/cursor.png) 3 5, text;*/
    cursor: text;

    border: var(--border-inner);
    border-radius: 2px;

    padding-left: 10px;
    text-align: left;
    vertical-align: middle;

    font-size: var(--font-size-medium);
    font-family: var(--poem-font), monospace;
}

.poem-text {
    margin: 4px;
    line-height: 1.5;

    span.line {
        display: block;
        float: left;

        span.word {
            padding: 1px 0.5ex;
            cursor: pointer;
        }

        span.word.selected {
            border-radius: 0px;
            background-color: var(--dark-manila);


        }
    }

    span.changed {
        padding: 0px 4px;
        border-radius: 5px;
        background-color: var(--grayhighlight);
    }

    &::selection {
        background-color: var(--manila);
    }
}

.cut-button-container {
    position: relative;
    flex: 0 1 40px;

    .cut-button {
        position: absolute;
        right: 0;
        top: 0;

        border: var(--border-inner);

        height: 36px;
        width: 36px;
        margin: 4px;
        padding: 4px;

        background:
                url(../assets/edit.png)
                center / 24px 24px
                no-repeat
                ghostwhite;
    }

    .cut-button:hover {
        background-color: var(--hover);
    }

}