.app {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: strict;
}

.drop {
  overflow: hidden;
  touch-action: none;
  height: 100%;
  width: 100%;

  &:global {
    &::after {
      content: '';
      position: absolute;
      display: block;
      left: 10px;
      top: 10px;
      right: 10px;
      bottom: 10px;
      border: 2px dashed #fff;
      background-color: rgba(0, 0, 0, 0.1);
      border-color: var(--pink);
      border-radius: 10px;
      opacity: 0;
      transform: scale(0.95);
      transition: all 200ms ease-in;
      transition-property: transform, opacity;
      pointer-events: none;
    }

    &.drop-valid::after {
      opacity: 1;
      transform: scale(1);
      transition-timing-function: ease-out;
    }
  }
}

.option-pair {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 100%;

  &.horizontal {
    justify-content: space-between;
    align-items: flex-end;
  }

  &.vertical {
    flex-direction: column;
  }
}

.app-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  --size: 225px;
  --stroke-width: 26px;
}