@define refs {
  name: dropZone;
}

@define props {
  borderSize: 3px;
  borderType: dashed;
  borderColor: currentColor;
  shadow: -1px 5px 25px -9px rgba(0, 0, 0, 0.2);
  paddingTop: 1.5rem;
  paddingBottom: 2.5rem;
}

@alga {refs.name} {
  .{refs.name} {
    ref: overflowWrap-breakWord padding-0.5rem;
    ref-maxWidth: calc(100vw - 0.5rem);
    ref-maxHeight: calc(100vh - 0.5rem);
    
    .{refs.name}File {
      ref: position-absolute width-0px height-0px overflow-hidden;
      ref-clip: rect(1px, 1px, 1px, 1px);
    }
    
    .{refs.name}Wrap {
      ref-borderWidth: {props.borderSize};
      ref-borderStyle: {props.borderType};
      ref-borderColor: {props.borderColor};
      ref-boxShadow: {props.shadow};
      
      .{refs.name}Label {
        ref: display-grid placeItems-center width-100pct height-100pct;
        ref: paddingTop-{props.paddingTop} paddingBottom-{props.paddingBottom} cursor-pointer;
      }
        
      .{refs.name}Image {
        ref: pointerEvents-none;
        ref-color: currentColor;
      }
      
      .{refs.name}Body {
        ref: textAlign-center;
        
        p, span {
          ref: margin-0px;
        }
        
        .{refs.name}Title {
          ref: color-inherit;
        }
        
        .{refs.name}Text {
          ref: color-hex737373;
        }
              
        .button {
          ref: backgroundColor-transparent display-inlineBlock textAlign-center verticalAlign-middle pointerEvents-none;
          ref: fontSize-1rem lineHeight-1.5rem fontWeight-400 userSelect-none marginTop-1.25rem borderRadius-0.35rem;
          ref-color: currentColor;
          ref-border: 2px solid currentColor;
          ref-padding: 0.375rem 0.75rem;
        }
      }
    }
  }
}