sparkletown/sparkle

@import "scss/constants";

$sparkle-size: font-size--root(2);
$sparkle-offset: font-size--root(0.25);
$nav-height: $sparkle-size + 2 * $sparkle-offset;
$logo-size: font-size--root(4);
$content-margin--top: 40%;
$content-margin--left: font-size--root(3);

.WorldShowcase {
  position: relative;
  left: 15%;
  top: 10%;
  width: 50vw;
  aspect-ratio: 16/9;
  background: linear-gradient(
    180deg,
    rgba(25, 24, 26, 0.32) 0%,
    rgba(25, 24, 26, 0.8) 100%
  );
  box-shadow: 0 4px 8px 0 opaque-black(0.25);

  &__nav {
    width: 100%;
    height: $nav-height;
    background-color: var(--content--under-25a);
    display: grid;
    place-items: center start;
  }

  &__title {
    margin-left: $sparkle-size + $sparkle-offset + font-size--root(1);
    font-weight: $font-weight--300;
    color: var(--content--over-80a);
    text-shadow: $text-shadow--outline;
  }

  &__sparkle {
    position: absolute;
    left: $sparkle-offset;
    top: $sparkle-offset;
    @include square-size($sparkle-size);

    background-size: cover;
    background-position: center;
    background-image: url(/assets/icons/sparkle-nav-logo.png);
  }

  &__profile {
    position: absolute;
    right: $sparkle-offset;
    top: $sparkle-offset;

    @include square-size($sparkle-size);
    border-radius: $border-radius--max;

    background-size: cover;
    background-position: center;
  }

  &__logo {
    @include square-size($logo-size);
    border-radius: $border-radius--max;

    background-size: cover;
    background-position: center;

    margin-bottom: font-size--root(2);
  }

  &__caption {
    font-size: font-size--root(2);
    color: var(--content--over);
    text-shadow: $text-shadow--outline;
  }

  &__content {
    position: absolute;
    top: $content-margin--top;
    left: $content-margin--left;
  }

  &__highlight {
    width: 100%;
    height: calc(100% - #{$nav-height});
    background-size: cover;
    background-position: center;
  }
}