sparkletown/sparkle

@import "scss/constants";

$world-card-logo-size: 70px;

.WorldCard {
  display: flex;
  flex-direction: column;
  background-color: $secondary--dark;
  border-radius: $border-radius--lg;
  margin: $spacing--lg;
  padding: $spacing--xxl;
  background-position: center;
  background-size: cover;

  &__logo {
    @include square-size(
      $world-card-logo-size,
      $world-card-logo-size,
      $world-card-logo-size
    );
    border-radius: $border-radius--max;
    background-size: cover;
    background-color: var(--greyscale-darker-50pp);
    box-shadow: 0 4px 12px opaque-black(0.4);
    align-self: flex-start;
  }

  &__info {
    display: flex;
    flex-direction: row;
    padding-bottom: $spacing--sm;
  }

  &__titles {
    padding-left: $spacing--sm;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__world-name {
    word-break: break-word;
    font-size: $font-size--xl;
    font-weight: $font-weight--700;
    text-shadow: $text-shadow--outline;
  }

  &__world-description {
    word-break: break-word;
    font-size: $font-size--sm;
    font-weight: $font-weight--400;
    text-shadow: $text-shadow--outline;
  }

  &__button {
    max-width: none;
    text-align: left;
  }
}