.WallpaperTile {
  cursor: var(--custom-cursor, pointer);
  position: relative;
  height: 0;
  padding-bottom: 100%;

  &::after {
    content: "";

    display: block;

    border: 2px solid var(--color-primary);

    opacity: 0;

    transition: opacity 0.15s ease;
  }

  .media-inner,
  &::after {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
  }

  .media-inner {
    transform: scale(1);
    overflow: hidden;
    transition: transform 0.15s ease;

    img,
    canvas {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      object-fit: cover;
    }
  }

  &.selected {
    &::after {
      opacity: 1;
    }

    .media-inner {
      transform: scale(0.9);
    }
  }

  .spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
