@import "slovenscina-elements.scss";

.form-wrapper {
  margin-bottom:1rem;
  label {
    display:block;
    font-weight: normal;
    font-size: 0.75rem;
    line-height: 0.875rem;
    text-transform: uppercase;
  }
  select {
    display:block;
    background: #FFFFFF;
    border: 1px solid $grey-border;
    padding: 0.75rem 1rem;
    width:100%;
  }
  input[type="text"] {
    box-sizing: border-box;
    display:block;
    background: #FFFFFF;
    border: 1px solid $grey-border;
    padding: 0.75rem 1rem;
    width:100%;
  }
  input[type="radio"] {
    float:left;
    margin:0;
    margin-right:0.5rem;
  }
  .dropzone {
    box-sizing: border-box;
    padding:0.5rem;
    height:4.5rem;
    background:#E0E6EA;
    .dz-default.dz-message {
      box-sizing: border-box;
      display: block;
      height:3.5rem;
      text-align: center;
      border:2px dashed white;
      span {
        display: inline-block;
        background: $blue;
        border-radius: 6px;
        color:white;
        padding: 0.5rem 0.75rem;
        margin-top:0.5rem;
        cursor: pointer;
      }
    }
  }
  .dz-preview.dz-file-preview {
    position:relative;
    background:white;
    height:4.5rem;
    margin-top:1rem;
    .dz-image {
      position:absolute;
      left:1rem;
      top:1rem;
      background: url(/static/image/file.svg);
      background-repeat: no-repeat;
      background-position: center;
      width:2rem;
      height:2rem;
      img {
        display: none;
      }
    }
    .dz-details {
      .dz-filename {
        position:absolute;
        top:1.5rem;
        left:4rem;
        width:50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dz-size {
        position:absolute;
        top:1.5rem;
        right:2.5rem;
      }

    }
    .dz-success-mark,.dz-error-mark {display:none;}
    .dz-progress {
      position:absolute;
      left:50%;
      top: 1.5rem;
      width:28%;
      border-radius: 10px;
      overflow: hidden;
      .dz-upload {
        height: 20px;
        display: inline-block;
        background:$blue;
      }
    }
    .dz-remove {
      position:absolute;
      top:1.5rem;
      right:1rem;
      width:1rem;
      height:1rem;
      background: url(/static/image/trash.svg);
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}