.container {
  cursor: var(--custom-cursor, pointer);

  position: relative;

  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;

  min-width: 0;
  padding: 0.625rem;
  padding-top: 0;
  border-radius: 0.625rem;

  background-color: var(--color-background-secondary);

  &::before {
    pointer-events: none;
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 0.625rem;

    opacity: 0;
    background-color: var(--color-hover-overlay);

    transition: opacity 0.15s;
  }

  :global(html.theme-dark) & {
    background-color: rgb(33, 33, 33);
  }

  &:hover::before {
    opacity: 1;
  }
}

.starGift {
  padding: 0.875rem;
  padding-bottom: 0.625rem;
}

.monthsDescription {
  margin-top: 0.25rem;
  font-weight: var(--font-weight-medium);
}

.description {
  overflow: hidden;

  max-width: 100%;

  font-size: 0.875rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy {
  margin-top: 0.625rem;
  font-size: 0.6875rem !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1;
}

.star {
  margin-inline-start: 0 !important;
  margin-inline-end: 0.125rem;
  font-size: 0.75rem !important;
}

.premiumRequired {
  outline: 0.125rem solid #D18D21;
  outline-offset: -0.125rem;

  &:focus-visible {
    outline: 0.125rem solid #D18D21;
    outline-offset: -0.125rem;
  }
}

.amount {
  margin-top: 0.0625rem; // It just refuses to be centered
}

.starsPriceBlock {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-stars);
}

.starsPriceIcon {
  margin-inline-start: 0 !important;
  margin-inline-end: 0.125rem !important;
}

.radialPattern {
  position: absolute;
  inset: 0;
}

.stickerWrapper {
  position: relative;
}