/**
 * AppBuckets UI
 *
 * _Dropzone @ src/styles/modules/_dropzone.scss
 *
 * Defined at 12 nov 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */

.dropzone {
  display: block;
  border-style: $dropzone-border-style;
  border-width: $dropzone-border-width;
  border-color: $dropzone-border-color;
  border-radius: $dropzone-border-radius;
  background-color: transparent;

  will-change: border-color, background-color;
  transition: border-color $transition-ease $transition-speed-fast,
  background-color $transition-ease $transition-speed-fast;


  // ----
  //  Empty Content Transition
  // ----
  .empty > .header {
    color: inherit;
    transition: opacity $transition-ease $transition-speed-fast,
    color $transition-ease $transition-speed-fast;
  }

  // ----
  //  Clickable Dropzone change it's behaviour on hover
  // ----
  &.clickable {
    &:not(.disabled) {
      cursor: pointer;

      @include hover {
        &:hover {
          border-color: $dropzone-hover-border-color;
          background-color: $dropzone-hover-background-color;

          .empty > .header {
            color: $dropzone-hover-color;
            opacity: 1;

            > .header-icon {
              text-shadow: 0 0 8px transparentize($dropzone-hover-color, .5);
            }
          }
        }
      }
    }
  }

  // ----
  //  Draggable dropzone change it's behaviour while changing class
  // ----
  &.draggable:not(.disabled).dragging {
    border-color: $dropzone-hover-border-color;
    background-color: $dropzone-hover-background-color;

    .empty > .header {
      color: $dropzone-hover-color;
      opacity: 1;

      > .header-icon {
        text-shadow: 0 0 8px transparentize($dropzone-hover-color, .5);
      }
    }
  }
}


/******
    Disabled Dropzone
******/
.disabled.dropzone {
  pointer-events: none;
  border-color: $dropzone-disabled-border-color;
  background-color: $dropzone-disabled-background-color;
  opacity: $disabled-element-opacity;
}


/******
    With Files
******/
.dropzone.with-files {
  padding: $dropzone-fulfilled-padding;
}