resources/web/style/feedback.pcss

#feedbackWidget {
  font-size: 14px;
  display: flex;
  line-height: 16px;
  margin: 0 12px;
  padding-top: 20px;
  align-items: center;
  justify-content: space-between;
  max-width: 200px;
  border-top: 1px solid rgb(211, 218, 230);

  .docHorizontalSpacer {
    display: inline-block;
    width: 12px;
  }

  .screenReaderOnly {
    position: absolute;
    inset-block-start: auto;
    inset-inline-start: -10000px;
    inline-size: 1px;
    block-size: 1px;
    clip: rect(0px, 0px, 0px, 0px);
    clip-path: inset(50%);
    overflow: hidden;
    margin: -1px;
  }

  .buttonGroup {
    max-inline-size: 100%;
    display: flex;
    border-radius: 4px;
  }

  .feedbackButton {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
    display: inline-block;
    appearance: none;
    cursor: pointer;
    white-space: nowrap;
    max-inline-size: 100%;
    vertical-align: middle;
    font-weight: 500;
    padding-block: 0px;
    block-size: 32px;
    font-size: 14px;
    line-height: 20px;
    min-inline-size: 0px;
    flex-shrink: 1;
    -webkit-box-flex: 0;
    flex-grow: 0;
    padding-inline: 8px;
    border-radius: 0px;
    color: rgb(52, 55, 65);
    background-color: rgb(233, 237, 243);
    transition: background-color 250ms ease-in-out 0s, color 250ms ease-in-out 0s;
    border-start-start-radius: 4px;
    border-start-end-radius: 0px;
    border-end-end-radius: 0px;
    border-end-start-radius: 4px;

    &:last-child {
      border-start-start-radius: 0px;
      border-start-end-radius: 4px;
      border-end-end-radius: 4px;
      border-end-start-radius: 0px;
      box-shadow: rgba(0, 0, 0, 0.1) -1px 0px 0px 0px;
    }

    .feedbackButtonContent {
      block-size: 100%;
      inline-size: 100%;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      vertical-align: middle;
      gap: 8px;
    }

    .feedbackIcon {
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
      fill: currentColor;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      inline-size: 16px;
      block-size: 16px;
      color: inherit;

      &.pressed {
        display: none;
      }
    }

    &.isPressed {
      color: rgb(255, 255, 255);
      background-color: rgb(105, 112, 125);
      outline-color: rgb(0, 0, 0);
      .feedbackIcon.unpressed {
        display: none;
      }
      .feedbackIcon.pressed {
        display: inline-block;
      }
    }
  }

}

@keyframes animation-modal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes animation-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

#feedbackModal {
  position: fixed;
  inset-block: 0px;
  inset-inline: 0px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-block-end: 10vh;
  animation: 150ms ease-in 0s 1 normal none running animation-modal;
  background: rgba(0, 0, 0, 0.5);
  z-index: 6000;

  .feedbackModalContent {
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 22.75px;
    -webkit-font-smoothing: antialiased;
    --removed-body-scroll-bar-size: 16px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: baseline;
    box-shadow: rgba(0, 0, 0, 0.13) 0px 2.7px 9px, rgba(0, 0, 0, 0.09) 0px 9.4px 24px, rgba(0, 0, 0, 0.08) 0px 21.8px 43px;
    display: flex;
    flex-direction: column;
    max-block-size: 75vh;
    position: relative;
    background-color: rgb(255, 255, 255);
    border-radius: 6px;
    z-index: 8000;
    min-inline-size: 475px;
    max-inline-size: 768px;
    animation: 350ms cubic-bezier(0.34, 1.61, 0.7, 1) 0s 1 normal none running animation-5jmqj1;

    .closeIcon {
      transition: transform 250ms ease-in-out 0s, background-color 250ms ease-in-out 0s;
      appearance: none;
      cursor: pointer;
      white-space: nowrap;
      max-inline-size: 100%;
      vertical-align: middle;
      display: inline-flex;
      -webkit-box-align: center;
      align-items: center;
      justify-content: space-around;
      inline-size: 24px;
      block-size: 24px;
      border-radius: 4px;
      color: rgb(52, 55, 65);
      position: absolute;
      inset-inline-end: 4px;
      inset-block-start: 4px;
      z-index: 3;
      border-width: 0px;
      background-color: transparent;
      right: 2px;

      > svg {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        display: inline-block;
        vertical-align: middle;
        fill: currentColor;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        inline-size: 16px;
        block-size: 16px;
        color: inherit;
      }
    }

    .feedbackModalHeader {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
      padding: 24px;
      padding-inline: 24px 40px;

      h2 {
        font-size: 24px;
        line-height: 28px;
        margin: 0px;
        padding: 0px;
        color: rgb(52, 55, 65);
      }
    }

    .feedbackModalBody {
      -webkit-box-flex: 1;
      flex-grow: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      font-size: 16px;
      line-height: 24px;
      color: rgb(52, 55, 65);

      .feedbackModalBodyOverflow {
        block-size: 100%;
        overflow: hidden auto;
        padding-inline: 24px;
        padding-block: 8px;
      }

      .spacer {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        block-size: 24px;
      }
    }

    .feedbackModalFooter {
      display: flex;
      -webkit-box-pack: end;
      justify-content: flex-end;
      padding: 24px;
      padding-inline: 24px;
      -webkit-box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
      gap: 16px;

      &.loading {
        .feedbackButton {
          color: rgb(162, 171, 186);
          &.sendButton {
            background-color: rgba(0, 119, 204, 0.1);
          }

          .feedbackButtonContent {
            display: none;
          }
        }

        .loadingContent {
          display: inline-block;
        }
      }

      .feedbackButton {
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        cursor: pointer;
        white-space: nowrap;
        max-inline-size: 100%;
        vertical-align: middle;
        font-weight: 500;
        block-size: 40px;
        font-size: 14px;
        line-height: 1.4286rem;
        border-radius: 6px;
        border-width: 0;
        color: rgb(0, 97, 166);
        background-color: rgb(204, 228, 245);

        &:hover {
          text-decoration: underline;
        }

        .feedbackButtonContent {
          block-size: 100%;
          inline-size: 100%;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          vertical-align: middle;
          gap: 8px;
        }
      }

      .cancelButton {
        transition-timing-function: ease-in;
        transition-duration: 150ms;
        display: inline-block;
        padding-inline: 8px;
        block-size: 40px;
        line-height: 40px;
        border-radius: 6px;
        background-color: transparent;
        color: #0061a6;
      }

      .sendButton {
        padding: 0px;
        padding-inline: 12px;
        line-height: 20px;
        min-inline-size: 112px;
        transition: transform 250ms ease-in-out 0s, background-color 250ms ease-in-out 0s;

        &:hover {
          transform: translateY(-1px);
        }

        .sendIcon {
          -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          display: inline-block;
          vertical-align: middle;
          fill: currentColor;
          -webkit-transform: translate(0, 0);
          -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
          transform: translate(0, 0);
          inline-size: 16px;
          block-size: 16px;
          color: inherit;

          &.dislike {
            display: none;
          }
        }

        &.dislike {
          .sendIcon.like {
            display: none;
          }
          .sendIcon.dislike {
            display: inline-block;
          }
        }

        &.like {
          .sendIcon.like {
            display: inline-block;
          }
        }

      }

      .loadingContent {
        display: none;
      }

      .loadingSpinner {
        animation: 0.6s linear 0s infinite normal none running animation-loading;
        flex-shrink: 0;
        display: inline-block;
        border-radius: 50%;
        border: 1.5px solid rgb(211, 218, 230);
        border-block-color: rgb(1, 81, 137) rgb(211, 218, 230);
        border-inline-color: rgb(211, 218, 230);
        inline-size: 16px;
        block-size: 16px;
        position: relative;
        left: -5px;
        top: 2px;
      }
    }


  }

  .feedbackFormRow {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    max-width: 400px;

    .feedbackFormRow__labelWrapper {
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      margin-bottom: 4px;

      .feedbackFormLabel {
        cursor: pointer;
        overflow-wrap: break-word!important;
        word-break: break-word;
        color: #1a1c21;
        font-weight: 600;
        display: inline-block;
        transition: all .15s cubic-bezier(.694,.0482,.335,1);
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 0;
      }
    }

    .feedbackFormControlLayout {
      height: auto;
      max-width: 400px;
      width: 100%;

      .feedbackFormControlLayout__childrenWrapper {
        position: relative;
      }

      .feedbackTextArea {
        resize: vertical;
        height: auto;
        max-width: 400px;
        width: 100%;
        /* height: 40px; */
        background-color: #fbfcfd;
        background-repeat: no-repeat;
        background-size: 0 100%;
        box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17,42,134,.1);
        transition: box-shadow .15s ease-in,background-image .15s ease-in,background-size .15s ease-in,background-color .15s ease-in;
        font-family: Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
        font-weight: 400;
        letter-spacing: normal;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-font-kerning: normal;
        font-kerning: normal;
        font-size: 14px;
        color: #343741;
        border: none;
        border-radius: 6px;
        padding: 12px;
        line-height: 1.5;
      }
    }

    .feedbackFormError {
      padding: 16px;
      background-color: #f8e9e9;
      font-size: 14px;
    }
  }
}

#feedbackSuccess {
  margin: 12px;
  font-size: 14px;
  padding: 16px;
  background-color: #e6f1fa;

  &.hidden {
    display: none;
  }
}