:root {
  --no-icon-selected-color: #e89795;
  --yes-icon-selected-color: #95e8b3;
  --feedback-buttons-gap: 2rem;
  --feedback-container-gap: 3rem;
  --feedback-button-icon-gap: 1rem;
  --feedback-button-font-size: 2rem;
  --feedback-button-icon-width: 4rem;
  --feedback-button-icon-height: 4.8rem;
}

/* General ---------------------------------------------------------------------------------------------------------- */
.hmw-comment {
    display: none;
}

.hmw-successful-submission-text {
    display: none;
    margin: 35px 0 33px;
}

.hmw-feedback {
    display: flex;
    gap: var(--feedback-container-gap);
}

.hmw-layout-side-by-side .hmw-feedback {
    flex-direction: row;
    gap: 32px;
}

.hmw-layout-stacked .hmw-feedback {
    flex-direction: column;
}

.hmw-title {
    margin: 0;
    padding: 0;
    margin: 0;
}

.hmw-description {
    padding: 0;
    margin: 32px 0 0 0;
}

.hmw-alignment-left .hmw-description {
    order: 2;
}

.hmw-alignment-left .hmw-title,
.hmw-alignment-left .hmw-description {
    text-align: left;
}

.hmw-alignment-center .hmw-title,
.hmw-alignment-center .hmw-description {
    text-align: center;
}

.hmw-alignment-right .hmw-title,
.hmw-alignment-right .hmw-description {
    text-align: right;
}

.hmw-feedback-container {
    display: flex;
    flex-direction: column;
    border-style: solid;
}

.hmw-image {
    width: 100%;
}

.hmw-feedback-container .hmw-image.hmw-image-position-top {
    order: 1;
}

.hmw-feedback-container .hmw-image.hmw-image-position-bottom {
    order: 4;
}

.hmw-feedback-container .hmw-comment {
    order: 3;
}




/* Comment Form ----------------------------------------------------------------------------------------------------- */
.hmw-comment {
    margin: 32px 0 0;
}

.hmw-comment-label {
    margin: 3px 0 9px;
}

.hmw-comment-top-container {
    display: flex;
}

.hmw-comment-character-counter-container {
    margin-left: auto;
}

.hmw-comment-character-counter-number,
.hmw-comment-character-counter-text {
    display: inline-block;
    margin: 3px 0 9px;
}

.hmw-comment-textarea {
    border-width: 1px;
    border-style: solid;
    padding: 15px;
    margin: 0 0 32px;
    width: 100%;
    min-height: 104px;
    height: 104px;
    max-height: 104px;
    outline: none;
    transition: all 0.4s ease;
    resize: none;
}

.hmw-comment-textarea:focus {
    outline: none;
}

.hmw-comment-buttons-container {
    display: flex;
    gap: 16px;
}

.hmw-comment-submit,
.hmw-comment-cancel {
    margin: 0;
    border: none;
    padding: 0 16px;
    overflow: hidden;
    height: 48px;
    border-width: 1px;
    border-style: solid;
}


/* Buttons ---------------------------------------------------------------------------------------------------------- */
.hmw-feedback-buttons-container, .hmw-feedback-buttons {
    display: flex ;
}

.hmw-feedback-buttons {
  gap: var(--feedback-buttons-gap);
}

.hmw-alignment-left .hmw-feedback-buttons-container {
    justify-content: flex-start;
}

.hmw-alignment-center .hmw-feedback-buttons-container {
    justify-content: center;
}

.hmw-alignment-center .hmw-feedback {
    justify-content: center;
}

.hmw-alignment-right .hmw-feedback {
    justify-content: right;
}

.hmw-alignment-right .hmw-feedback-buttons-container {
    justify-content: flex-end;
}

.hmw-feedback-button-type-icon-and-text .hmw-icon-circle {
    display: none;
}

.hmw-feedback-button:hover {
    opacity: 0.7;
}

.hmw-feedback-button:has(.hmw-feedback-button-icon) {
  display: flex;
  align-items: center;
  gap: var(--feedback-button-icon-gap);
}

.hmw-feedback-button-text {
  font-size: var(--feedback-button-font-size);
}

.hmw-feedback-button-icon svg {
  width: var(--feedback-button-icon-width);
  height: var(--feedback-button-icon-height);
}

.hmw-yes-selected svg {
  color: var(--yes-icon-selected-color);
}

.hmw-no-selected svg {
  color: var(--no-icon-selected-color);
}