.feedback,
.gratitude {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stars {
  display: flex;
  margin-bottom: 40px;

  input {
    display: none;
  }

  label {
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 45px;
  }

  // закрашенные звезды
  label:hover,
  &:has(label:hover) label,
  &:has(input:checked) label {
    .star-fill {
      display: inline-block;
    }

    .star-outline {
      display: none;
    }
  }

  // незакрашенные звезды
  label,
  label:hover ~ label,
  &:not(:has(label:hover)) input:checked + label ~ label {
    .star-fill {
      display: none;
    }

    .star-outline {
      display: inline-block;
    }
  }
}

.title {
  margin-bottom: 10px;
  font-size: 20px;
}

.description {
  text-align: center;
}

.feedback-comment {
  width: 100%;
  margin-top: 50px;
  padding: 5px;

  border: 2px solid var(--border-primary-color);
  border-radius: 3px;
  outline: none;

  &:focus {
    border-color: var(--ds-border-accent-blue);
  }
}

button.comment-send {
  margin-top: 25px;
}

a,
a:active,
a:visited {
  color: var(--ds-link);
}