$dz-bg: #fff;
$dz-border: #717386;

:host {
  display: flex;
  align-items: center;
  height: 180px;
  background: $dz-bg;
  cursor: pointer;
  color: $dz-border;
  border: 2px dashed $dz-border;
  border-radius: 5px;
  font-size: 16px;

  &.utils-dz-hovered {
    border-style: solid;
  }

  &.utils-dz-disabled {
    opacity: 0.5;
    cursor: no-drop;
    pointer-events: none;
  }

  /** The default scroll-to-side styles **/
  overflow-x: auto;

  &.expandable {
    overflow: hidden;
    height: unset;
    min-height: 180px;
    flex-wrap: wrap;
  }

  &.unclickable {
    cursor: default;
  }

  ::ng-deep utils-dropzone-label {
    text-align: center;
    z-index: 10;
    margin: 10px auto;
  }

  & input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;

    &:focus + ::ng-deep utils-dropzone-label {
      /* Fallback for older browsers */
      outline: 1px dotted #000;

      outline: -webkit-focus-ring-color auto 5px;
    }
  }
}