@mixin border-radius ($radius) {
  position: relative;
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

.asset-box-input.dragin {
  > .drop-files {
    border: 4px dashed #5cb85c;

    > p { color: #5cb85c; }
  }
}

.asset-box-input {
  width: 100%;
  height: 100%;

  .fileinput-button {
    overflow: hidden;
    position: relative;

    input {
      cursor: pointer;
      direction: ltr;
      opacity: 0;
      margin: 0;
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
    }
  }

  // Display uploader bordered area
  .drop-files {
    border: 4px dashed #cfcfcf;
    padding: 4px;
    margin-bottom: 8px;

    > p {
      text-align: center;
      color: #cfcfcf;
      font-size: 16px;
    }
  }

  .filter-attachments {
    display: inline;
    font-weight: normal;
  }

  // asset_box_input/attachment_as_table
  tbody.attachments {
    .attachment-image img {
      max-height: 48px;
      max-width: 48px;
    }

    .attachment-title {
      overflow: auto;
      text-overflow: ellipsis;
    }

    tr {
      td { vertical-align: middle; }
    }
  }

  // asset_box_input/attachment_as_list
  ul.attachments {
    .attachment {
      position: relative;

      .attachment-title {
        overflow: hidden;
        word-break: keep-all;
        text-align: left;
      }

      .attachment-remove {
        position: absolute;
        top: 0px;
        right: 7px;
      }
    }
  }

  // asset_box_input/attachment_as_thumbnail
  div.attachments {
    .attachment {
      position: relative;

      .attachment-title {
        overflow: hidden;
        word-break: keep-all;
        text-align: center;
      }

      .attachment-remove {
        position: absolute;
        top: 7px;
        right: 22px;
      }
    }
  }

  .uploads {
    .upload {
      border-top: solid 1px #CCC;
      width: 100%;
      //min-width: 400px;
      padding-top: 10px;
      margin-top: 10px;

      .progress {
        margin-top: 8px;
        border: solid 1px #555;
        @include border-radius(3px);

        .spinner {
          height: 18px;
          width: 18px;
        }

        .bar {
          height: 100%;
          background: #3EC144;
        }
      }
    }
  }
}