.q-feedback {
  font:
    400 14px/20px QuoterGeist,
    Arial,
    sans-serif;
}
.q-feedback__panel {
  box-sizing: border-box;
  position: fixed;
  width: 340px;
  z-index: 101;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ss-surface-light);
  color: #171717;
  font:
    400 14px/20px QuoterGeist,
    Arial,
    sans-serif;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.02),
    0 4px 8px -4px rgba(0, 0, 0, 0.04),
    0 16px 24px -8px rgba(0, 0, 0, 0.06),
    0 0 0 1px #fafafa;
  animation: q-feedback-in 100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.q-feedback__fields {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-feedback__textarea {
  box-sizing: border-box;
  display: block;
  height: 100px;
  width: 100%;
  padding: 10px 12px;
  resize: none;
  outline: none;
  border: 0;
  border-radius: 6px;
  font:
    400 14px/20px QuoterGeist,
    Arial,
    sans-serif;
  background: var(--ss-surface-light);
  color: inherit;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.q-feedback__textarea:focus {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(0, 0, 0, 0.16);
}
.q-feedback__textarea::placeholder {
  color: #8f8f8f;
}
.q-feedback__markdown {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #4d4d4d;
}
.q-feedback__markdown-icon {
  box-sizing: border-box;
  width: 22px;
  height: 14px;
  flex: none;
  color: #8f8f8f;
}
.q-feedback__footer {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-top: 1px solid #ebebeb;
}
.q-feedback__ratings {
  display: flex;
  align-items: center;
  gap: 1px;
  color: #4d4d4d;
}
.q-feedback__rating {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.q-feedback__rating:hover,
.q-feedback__rating[aria-checked='true'] {
  background: var(--ss-rating-background);
  color: var(--ss-primary);
}
.q-feedback__rating:focus-visible {
  outline: 2px solid var(--ss-primary);
  outline-offset: 2px;
}
.q-feedback__error {
  margin: 0;
  padding: 0 8px 8px;
  color: #e5484d;
}
.q-feedback__success {
  height: 195px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.q-feedback__success p {
  margin: 0;
  font:
    400 14px/20px QuoterGeist,
    Arial,
    sans-serif;
}
.q-feedback__success-icon {
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--q-green-900);
}
.q-feedback__panel[data-inline='true'] {
  position: relative;
  z-index: auto;
  width: 274px;
  height: 48px;
  border-radius: 30px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition:
    height 150ms ease-out,
    width 150ms ease-out,
    border-radius 150ms ease-out;
}
.q-feedback__panel[data-inline='true'][data-expanded='true'] {
  height: 243px;
  width: 336px;
  border-radius: 12px;
}
.q-feedback__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  height: 48px;
  box-sizing: border-box;
}
.q-feedback__header p {
  margin: 0;
  white-space: nowrap;
  color: #4d4d4d;
}
.q-feedback__panel[data-inline='true'] .q-feedback__footer {
  justify-content: flex-end;
}
.q-feedback__panel[data-inline='true'][data-success='true'][data-expanded='true'] {
  height: 243px;
  width: 336px;
  border-radius: 12px;
}
.q-feedback__panel[data-inline='true'] .q-feedback__success {
  height: 75%;
  padding-top: 48px;
  box-sizing: border-box;
}
.q-feedback__panel [hidden] {
  display: none !important;
}
[data-theme='dark'] .q-feedback__panel,
[data-theme='dark'] .q-feedback__textarea {
  background: #0a0a0a;
  color: #ededed;
}
[data-theme='dark'] .q-feedback__textarea {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
[data-theme='dark'] .q-feedback__textarea:focus {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.51),
    0 0 0 4px rgba(255, 255, 255, 0.24);
}
[data-theme='dark'] .q-feedback__panel {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.145),
    0 1px 1px rgba(0, 0, 0, 0.02),
    0 4px 8px -4px rgba(0, 0, 0, 0.04),
    0 16px 24px -8px rgba(0, 0, 0, 0.06),
    0 0 0 1px #000;
}
[data-theme='dark'] .q-feedback__panel[data-inline='true'] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.145);
}
[data-theme='dark'] .q-feedback__footer {
  border-color: #2e2e2e;
}
[data-theme='dark'] .q-feedback__header p,
[data-theme='dark'] .q-feedback__ratings,
[data-theme='dark'] .q-feedback__markdown {
  color: #a1a1a1;
}
@keyframes q-feedback-in {
  from {
    opacity: 0;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes q-feedback-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}
@keyframes q-feedback-appear {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.q-docs-feedback {
  height: 48px;
  display: flex;
  justify-content: center;
}
.q-docs-feedback .q-feedback__panel[data-inline='true'][data-expanded='true'] {
  height: 245px;
  transform: translateY(-200px);
}
.q-docs-feedback .q-feedback__panel[data-inline='true'][data-success='true'] {
  transform: translateY(-150px);
}
.q-docs-feedback-mobile {
  display: none;
  margin-top: 44px;
}
.q-docs-feedback-mobile > .q-feedback {
  max-width: 100%;
}
.q-docs-feedback-mobile .q-feedback__panel {
  max-width: 100%;
}
@media (max-width: 1023px) {
  .q-docs-feedback-mobile {
    display: flex;
    justify-content: center;
  }
  .q-docs-feedback-footer {
    padding: 16px;
  }
  .q-docs-feedback-footer > .q-pagination {
    margin-top: 32px;
  }
}

.q-feedback__rating {
  transition:
    background 200ms,
    border-color 200ms;
}
.q-feedback__rating svg path {
  transition: all 200ms;
}
.q-feedback__rating:hover svg path,
.q-feedback__rating[aria-checked='true'] svg path {
  fill: var(--ss-primary);
}

.q-feedback__panel[data-state='closed'] {
  animation: q-feedback-out 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
.q-feedback__panel[data-success='true']:not([data-inline='true']) {
  height: 195px;
}
.q-feedback__form {
  transition:
    opacity 200ms,
    translate 200ms;
}
.q-feedback__form--exiting {
  opacity: 0;
  translate: 0 -4px;
}
.q-feedback__success > * {
  opacity: 0;
  animation: q-feedback-appear 500ms 100ms ease forwards;
}
.q-feedback__success > p:nth-child(2) {
  animation-delay: 200ms;
}
.q-feedback__success > p:nth-child(3) {
  animation-delay: 400ms;
}
.q-feedback__rating:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--q-background-100),
    0 0 0 4px var(--ss-primary);
}
.q-feedback__textarea {
  transition: box-shadow 150ms;
}
.q-feedback__textarea:hover:not(:focus) {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.21);
}
[data-theme='dark'] .q-feedback__textarea:hover:not(:focus) {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.q-feedback__fields .q-select__suffix {
  width: 14px;
  height: 14px;
}
.q-feedback__fields .q-select__input:focus {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(0, 0, 0, 0.16);
}
[data-theme='dark'] .q-feedback__fields .q-select__input:focus {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.51),
    0 0 0 4px rgba(255, 255, 255, 0.24);
}

.q-feedback__textarea {
  color: #000;
}
[data-theme='dark'] .q-feedback__textarea {
  color: #fff;
}

.q-feedback__success > * {
  translate: 0 4px;
}