@use "../vars";

// todo: fix small width
.post-form {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 5rem auto;
    margin: 0 1rem;

    button {
        width: 35%;
        padding: 0.5rem 0.5rem;
        justify-self: end;
    }

    textarea {
        background-color: vars.$foregroundColor;
        border: 0;
        border-radius: 3px;
        box-shadow:
            0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset,
            0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset,
            0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
        box-sizing: border-box;
        color: vars.$textColor;
        font-family: inherit;
        font-size: 14px;
        resize: none;
        padding: 0.5rem 0.5rem;
        hyphens: none;
        width: 100%;
    }
}