.x-file-drop {
  @extend .position-relative;

  .x-drop-zone {
    @extend .position-absolute,
            .h-100,
            .w-100,
            .border,
            .border-secondary,
            .d-flex,
            .x-border-dashed,
            .x-border-thick,
            .align-items-center,
            .justify-content-center;

    top: 0;
    background-color: fade-out(theme-color("light"), .25);

    &.d-none {
      @extend .d-none;
    }

    > .x-file-drop-message {
      @extend .d-flex,
              .align-items-center,
              .text-secondary-darker;
      .x-icon-container {
        @extend .mr-2;
      }
    }
  }
}