$field-bg: rgba(0, 0, 0, .05);
$field-bg-hover: rgba(0, 0, 0, .1);
$field-bg-shadow: rgba(0, 0, 0, .18);
$upload-camera-box-color: hsla(0, 0% , 4%, .1);
$upload-camera-box-color-accent: #4b79bf;
$upload-camera-preview-box-shadow: 0 2px 3px $upload-camera-box-color, 0 0 0 1px $upload-camera-box-color-accent;
$white: #ffffff;

.upload-group.columns {
  margin-top: .5rem;
  margin-bottom: -1.25rem;
}

.upload-field {
  position: relative;
  display: flex;
  width: 100%;
  height: 100px;
  margin-bottom: .75rem;
  border: 1px dashed $text; //$text
  border-radius: 4px;
  background-color: $field-bg;
  transition: background-color .3s ease;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &:hover {
    background-color: $field-bg-hover;
    box-shadow: inset 0 0 5px 2px $field-bg-shadow;
  }

  label {
    cursor: pointer;
    display: block;
  }

  &.max-exceeded input {
    cursor: not-allowed;
  }
}

.upload-field-input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-group .upload-item {
  padding-top: .3em;
  padding-bottom: .3em;
}

.upload-item {
  transition: background-color .3s ease;

  &.is-deleting .box {
    opacity: .5;

  }

  img {
    max-height: 80px;
    cursor: pointer;
  }
}

.ember-view .upload-status-icon { //hack to override another hack, scared to change the other hack
  .fa-stack-1x {
    font-size: 1rem;
  }

  .fa-stack-2x {
    font-size: 2em;
  }
}

.upload-item-error {
  color: $danger;
  font-style: italic;

}

.upload-status-current {
  .status-icon .fa {
    color: $primary; //$turquoise
  }

  .status-icon .fa:hover {
    color: $primary; //$turquoise
  }
}

.upload-status-completed {
  .status-icon .fa {
    color: $success;
  }

  .status-icon .fa:hover {
    color: $success;
  }
}

.upload-status-failed {
  .status-icon .fa {
    color: $danger; //$danger
  }

  .status-icon .fa:hover {
    color: $danger; //$danger
  }
}

// Camera

.upload-camera {

  .flash-in {
    background-color: $white;
    opacity: 0;
  }

  .flash-out {
    opacity: 1;
  }

  video {
    width: 100%;
    height: auto;
    border-radius: 4px;
    opacity: 1;
    transition: opacity .3s;
  }

}

.upload-camera-preview .upload-camera-preview-item {
  position: relative;
  padding: .45em;


  .is-active {
    box-shadow: $upload-camera-preview-box-shadow;

    .icon {
      display: block;
    }

  }


  .upload-camera-preview-item {
    &:hover .icon,
    &:focus .icon,
    &:active .icon {
      display: block;
    }
  }

  i {
    border-radius: 50%;
    background-color: $white;
  }

  .icon {
    position: absolute;
    top: -12px;
    left: -12px;
    display: none;
  }
}