$Uploaderborder-color: $global-border-color;
$Uploader-activeborder-color: #999999;
$UploaderFileSpacing: 0.2rem;
$Uploader-size: 5rem;
$Uploaderborder-width: 1px;

.xm-cell[role="uploader"] {
  flex-wrap: wrap;
  > .xm-uploader {
    list-style: none;
    padding: 0 (1rem - $UploaderFileSpacing) (1rem - $UploaderFileSpacing);
    height: auto;
    margin: 0 -1rem;
    > li {
      position: relative;
      float: left;
      margin: $UploaderFileSpacing;
      width: $Uploader-size;
      height: $Uploader-size;
      background: no-repeat center center;
      background-size: cover;
      background-color: #F8F8F8;
      // status
      &.xm-uploader-status {
        position: relative;
        &:before {
          content: " ";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: rgba(0, 0, 0, .5);
        }
        > span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #FFFFFF;
          &.icon-warn {
            display: block;
            font-size: 1.5rem;
            color:$c-red;
          }
        }
      }
      // input
      &.xm-uploader-input {
        background: transparent;
        border: $Uploaderborder-width solid $Uploaderborder-color;
        &:before, &:after {
          content: " ";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: $Uploaderborder-color;
        }
        &:before {
          width: 2px;
          height: $Uploader-size / 2;
        }
        &:after {
          width: $Uploader-size / 2;
          height: 2px;
        }
        &:active {
          border-color: $Uploader-activeborder-color;
          &:before, &:after {
            background-color: $Uploader-activeborder-color;
          }
        }
        > input {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
      }
    }
  }
}