@import "~terriajs-variables";
@import "../Sass/common/mixins";

.drop-zone {
  composes: drop-zone from "../Sass/common/_drop_zone.scss";

  position: absolute;

  &.is-active {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
    z-index: 99999;
  }
}

.is-active {
  composes: is-active from "../Sass/common/_drop_zone.scss";
}

.inner {
  @include vertical-align();

  color: #fff;
  color: rgba(#fff, 0.9);
  text-align: center;
  font-family: $font-pop;

  &:before {
    content: "";
    display: block;
    height: 80px;
    width: 70px;
    margin: 0 auto;
    background-image: url("../../wwwroot/images/drag-drop.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.heading {
  margin-top: 0.5em;
}

.caption {
  font-size: 1.5rem;
}