:root {
  --feedback--primary-color: hsl(203, 43%, 50%);
  --feedback--secondary-color: oklch(78.68% 0.1135 53.95 / 56.05%);
  --feedback--admin-color: oklch(48.09% 0.1924 7.94 / 80.83%)
}

form.feedback--form {
  & textarea {
    border: solid 0.1rem var(--feedback--primary-color);
    border-radius: 0.3rem;
  }

  & div.actions {
    margin-top: 1rem;
  }
}

form.feedback--filter-form {
  margin-bottom: 1rem;

  & select {
    border: solid 0.1rem var(--feedback--primary-color);
    border-radius: 0.3rem;
  }
}

.feedback--button, .feedback--button-to {
  border: 1px solid #ccc;
  padding: 0.1rem 0.5rem;
  border-radius: 0.2rem;

  &:hover {
    background-color: var(--feedback--secondary-color);
  }
}

/* Admin actions */
form:has(.feedback--button-to) {
  display: inline;
  margin-right: 0.2rem;
}

 div.feedback--post-card {
  padding: 0.4rem;
  margin-bottom: 1rem;
  border: solid 0.1rem;
  border-radius: 0.4rem;
  box-shadow: 0.15rem 0.15rem 0.07rem var(--feedback--primary-color);
 }

div.feedback--admin-card {
  padding: 0.4rem;
  margin-bottom: 1rem;
  border: solid 0.2rem;
  border-radius: 0.4rem;
  box-shadow: 0.15rem 0.15rem 0.07rem var(--feedback--admin-color);
}

div.feedback--comment-row {
  display: flex;
  justify-content: flex-end;

  &:has(.feedback--my-comment) {
    justify-content: flex-start;
  }

  &:not(:has(.feedback--my-comment)) > div.feedback--comment {
    background-color: var(--feedback--secondary-color)
  }
}

div.feedback--comment {
  border: solid 0.1rem;
  border-radius: 0.2rem;
  padding: 0.4rem 1rem;
  box-shadow: 0.15rem 0.15rem 0.07rem var(--feedback--secondary-color);

  margin-bottom: 1rem;
  display: inline-block;

  & span.feedback--comment-date {
    font-size: 0.8rem;
    opacity: 0.8;
  }
}

.feedback--notification-card {
  width: fit-content;
  padding: 1rem;
  margin-bottom: 1rem;
  border: solid 0.1rem;
  border-radius: 0.4rem;
  box-shadow: 0.15rem 0.15rem 0.07rem var(--feedback--primary-color);
}