.form-dropzone {
  &__dropzone {
    width: 100%;
    background: var(--color-surface-secondary);
    padding: 16px 24px;
    border: none;
    box-shadow: none;
    z-index: 1;
    outline: 0;
    @mixin easing easeOutQuart, all, 0.2s;
    @mixin text-m;
    &:hover {
      background: var(--color-surface-primary-hover);
    }
    ^&__hint {
      min-height: 160px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-content: center;
      cursor: pointer;
      &-title {
        color: var(--color-surface-text-primary);
        padding: 0 0 8px 0;
        margin: 0;
        @mixin text-s;
        @media (--mobile) {
          padding: 0 0 4px 0;
        }
        & span {
          @media (--mobile) {
            display: none;
          }
        }
      }
      &-text {
        color: var(--color-surface-text-secondary);
        padding: 0;
        margin: 0;
        @mixin text-s;
      }
    }
  }
  &__thumb {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    &-remove {
      width: 100%;
      color: red;
      text-align: center;
      margin: 0 0 16px 0;
      cursor: pointer;
      @mixin text-m;
    }
    &-item {
      width: 100%;
      @media (--mobile) {
        width: 100%;
      }
      &-inner {
        padding: 8px;
        margin: 0 24px 24px 24px;
        border: solid 1px #ccc;
        overflow: hidden;
        display: flex;
        justify-content: center;
        @mixin text-m;
      }
    }
  }
  &_state_focus {
    ^&__dropzone {
      background: var(--color-surface-primary);
    }
  }
}
.form-dropzone {
  &&_type_avatar {
    width: 144px;
    height: 144px;
    border-radius: 50%;
    overflow: hidden;
    & .form-dropzone {
      &__dropzone {
        padding: 0;
      }
    }
  }
}