.root {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  color: var(--color-white);

  .button {
    width: auto;
    height: 2.25rem;
    margin-top: 1.0625rem;

    line-height: 2.25rem;
    color: var(--color-white);
    text-transform: none;

    background: var(--pattern-color);

    transition: filter 150ms ease-in-out;

    &:not(.disabled):not(:disabled):hover {
      background-color: var(--pattern-color);
      filter: brightness(1.05);
    }
  }
}

.inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 13.5rem;
  padding: 1.0625rem 0;
  border-radius: 1.5rem;

  background: var(--pattern-color);

  &[dir="rtl"] {
    text-align: right;
  }
}

.icons-container {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 8rem;
  height: 8rem;
  border-radius: 50%;

  background: var(--pattern-color);
}

.animated-unlock {
  z-index: 10;
}

.comments-icon {
  position: absolute;
  top: 0;
  transform: translateY(1.75rem);
  font-size: 5rem;
}

.description {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  margin-top: 0.5rem;
  padding: 0 1rem;

  text-align: center;
  white-space: pre;
}

.starIconContainer {
  display: inline-flex;
  align-items: center;
  font-weight: var(--font-weight-medium);
}

.starIcon {
  margin-inline-start: 0 !important;
  margin-inline-end: 0.0625rem !important;
}