.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

// https://codepen.io/adenoe/pen/yLyXdow

.comments {
    input,
    textarea {
        background: var(--askella-menu-bg-color-lighten-2);
        &:focus {
            background: var(--askella-menu-bg-color-lighten-5);
        }
        &::placeholder{
            color: var(--askella-font-color);
        }
    }



    font: 75% "Roboto", "Open Sans", "Helvetica Neue", "Arial", "sans-serif";
    line-height: 1.5;
    position: relative;
    width: 100%;
    margin-top: 50px;
    box-sizing: border-box;


}

// .comments::after {
//     content: " ";
//     display: table;
//     clear: both;
// }

.comments__form-info,
.comments__form-text {
    width: 100%;
    margin: 0;
}

.comments__form-info {
    float: left;
}
// .comments__form-text {
//     float: right;
// }

.comments__form-field {
    position: relative;
}
.comments__form-label {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font: 700 1.125em "Open Sans", "Helvetica Neue", "Arial", "sans-serif";
    cursor: text;
    pointer-events: none;
}

.comments__form-label-text {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition-duration: 0.5s;
    transition-property: transform, opacity;
}

//:not(:placeholder-shown) is used in order that the label stays visible if the form field is dirty. seems to work but experimental.

.comments__form-input:not(:placeholder-shown)::-webkit-input-placeholder,
.comments__form-input:focus::-webkit-input-placeholder {
    color: transparent;
}
.comments__form-input:not(:placeholder-shown) + .comments__form-label .comments__form-label-text,
.comments__form-input:focus + .comments__form-label .comments__form-label-text {
    transform: translateY(0);
    opacity: 1;
}

.comments__form-label::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--askella-font-color);
    bottom: 1em;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s;
}

.comments__form-input:focus + .comments__form-label::after {
    transform: scaleX(1);
}

input.comments__form-input,
textarea.comments__form-input {
    position: relative;
    width: 100%;
    padding: 1em 0;
    border: 0;
    outline: 0;
    margin: 1em 0;
    border-bottom: 3px solid var(--askella-menu-bg-color-lighten-50);
    vertical-align: bottom;
    font: 400 1.125em "Open Sans", "Helvetica Neue", "Arial", "sans-serif";
}

.comments__form-textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 168px;
}

// input.comments__form-submit {
//     padding: 0.5em;
//     margin: 1em 0;
//     background: none;
//     border: 3px solid var(--askella-font-color)!important;
//     font: 700 1em "Roboto", "Helvetica Neue", Arial, sans-serif;
//     text-transform: uppercase;
//     letter-spacing: 0.1em;
//     cursor: pointer;
//     opacity: 0.6;
//     transition: ease-in-out 0.1s;
// }

// input.comments__form-submit:hover {
//     opacity: 1;
// }