$picture-card-size: 104px;
$white: #fff;
$black: #000;
$background-color-light: rgb(249,249,249);
$background-color-base: rgb(244,244,244);
$border-radius-base: 2px;
$border-style-base: solid;
$line-height-base: 1.5715;
$border-width-base: 1px;
$border-color-base: rgb(216,216,216);
$border-color-split: rgba(0,0,0,0.06);
$border-color-inverse: $white;
$primary-color: #1890ff;
$margin-xs: 8px;
$margin-xss: 4px;
$padding-xs: 8px;
$padding-xss: 4px;
$text-color: rgba($black,0.85);
$text-color-dark: rgba($white,0.85);
$text-color-inverse: $white;
$text-color-secondary: rgba($black,0.45);
$font-size-base: 14px;
$item-hover-bg: #f5f5f5;
$error-color: #ff4d4f;

.dropZone-root {
  display: inline;
  vertical-align: middle;
}

.imageCrop {
  outline: 0;

  p {
    margin: 0;
  }
  &-btn {
    display: block;
    width: 100%;
    outline: none;
  }

  &-select {
    display: inline-block;
  }

  &-disabled {
    cursor: not-allowed;
  }

  &-select-picture-card {
    width: $picture-card-size;
    height: $picture-card-size;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: middle;
    background-color: $background-color-light;
    border: $border-width-base dashed $border-color-base;
    border-radius: $border-radius-base;
    cursor: pointer;
    transition: border-color 0.3s;

    > .imageCrop {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
    }

    &:hover {
      border-color: $primary-color;
      .imageCrop-disabled {
        border-color: $border-color-base;
      }
    }
  }
}

.imageCrop-list {
  line-height: $line-height-base;

  &-span {
    display: flex;
    align-items: center;

    > * {
      flex: none;
    }
  }
  // ===============Item ==================
  &-item {
    position: relative;
    height: $line-height-base * $font-size-base;
    margin-top: $margin-xs;
    font-size: $font-size-base;

    &-card-actions {
      position: absolute;
      right: 0;

      &-btn {
        opacity: 0;
      }
      &-btn.-btn-sm {
        height: 20px;
        line-height: 1;
      }

      &-btn:focus,
      &.picture &-btn {
        opacity: 1;
      }
      height: 100%;
      padding: 0 4px;
      transition: background-color 0.3s;

      > span {
        display: block;
        width: 100%;
        height: 100%;
      }

    }

    &:hover &-info {
      background-color: $item-hover-bg;
    }

    &-error,
    &-error .imageCrop-text-icon > .imageCropIcon,
    &-error &-name {
      color: $error-color;
    }

    &-error &-card-actions {
      .imageCropIcon {
        color: $error-color;
      }

      &-btn {
        opacity: 1;
      }
    }

  }

  // ================Picture Card==================
  &-picture-card {
    &-container {
      display: inline-block;
      width: $picture-card-size;
      height: $picture-card-size;
      margin: 0 $margin-xs $margin-xs 0;
      vertical-align: middle;
      text-align: center;
    }

    &.imageCrop-list::after {
      display: none;
    }
    .imageCrop-list-item {
      height: 100%;
      margin: 0;
      position: relative;
      padding: $padding-xs;
      border: $border-width-base $border-style-base $border-color-base;
      border-radius: $border-radius-base;

      &:hover {
        background: transparent;
      }

      &-error {
        border-color: $error-color;
      }
    }

    .imageCrop-list-item-info {
      padding: 0;
      position: relative;
      height: 100%;
      overflow: hidden;
      background: transparent;

      &::before {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba($black,0.5);
        transform: translate(-50%,0);
        opacity: 0;
        transition: all 0.3s;
        content: ' ';
      }    
    }

    .imageCrop-list-item:hover  .imageCrop-list-item-info::before {
      opacity: 1;
    }

    .imageCrop-list-item-actions {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 0.3s;

      .imageCropIcon-icon {
        z-index: 10;
        width: 16px;
        margin: 0 4px;
        color: $text-color-dark;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          color: $text-color-inverse;
        }
      }
    }
    
    .imageCrop-list-item-info:hover + .imageCrop-list-item-actions,
    .imageCrop-list-item-actions:hover {
      opacity: 1;
    }

    .imageCrop-list-item-image {
      max-width: 100%;
    }

    .imageCrop-list-item-thumbnail,
    .imageCrop-list-item-thumbnail img {
      position: static;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;

      .imageCropIcon {
        font-size: 26px;
      }
    } 
    
  }
}