@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;
}