sparkletown/sparkle

@import "scss/constants";

$map-default-size: 64px;

.BackgroundSelect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: $spacing--xl 0;
  position: relative;
  background-size: cover;
  background-color: $secondary--live;
  background-position: center;
  text-align: center;

  &__maps-header {
    font-size: $font-size--md;
    font-weight: normal;
    color: var(--content--over-50a);
    margin: $spacing--xxl auto $spacing--md auto;
  }

  &__map-grid {
    width: 100%;
    padding: 0 $spacing--lg;
    display: grid;
    grid-gap: $spacing--sm;
    grid-template-columns: repeat(4, 1fr);
  }

  .FileButton .ButtonNG {
    height: font-size--parent(4);
  }

  .ButtonNG.BackgroundSelect__map {
    height: $map-default-size;
    border-radius: $border-radius--lg;
    background-color: $content--under;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: solid 2px var(--content--over-20a);
    display: grid;
    place-content: center center;

    &:hover,
    &:focus {
      border: 2px solid var(--content--over);
    }

    .ButtonNG__icon--loading {
      color: var(--content--over);
      @include square-size($map-default-size / 2);
    }
  }
}