@import "~terriajs-variables";
@import "mixins";

.drop-zone {
  @include transition(height 0.25s ease-in-out);

  background: transparent;
  opacity: 0;
  z-index: -1;

  &.is-active {
    @include transition(opacity, 0.2s);
    background: #fff;
    background: -moz-radial-gradient(
      center,
      ellipse cover,
      rgba($dark-lighter, 0.7) 0%,
      rgba($dark, 1) 100%
    );
    background: -webkit-radial-gradient(
      center,
      ellipse cover,
      rgba($dark-lighter, 0.7) 0%,
      rgba($dark, 1) 100%
    );
    background: radial-gradient(
      ellipse at center,
      rgba($dark-lighter, 0.7) 0%,
      rgba($dark, 1) 100%
    );
    opacity: 1;
    display: block;
    border: 0;
  }
}