@import '../animation/variables.scss';

$name: 'ivue-upload';

:root {
  // content
  --#{$name}-content-size: 100px;
  --#{$name}-content-margin: 0 8px 8px 0;
  --#{$name}-content-radius: 8px;

  // loading
  --#{$name}-loading-size: 22px;

  // remove
  --#{$name}-remove-size: 16px;

  // color
  --#{$name}-content-color: #9ab0c6;

  // mask
  --#{$name}-mask-color: rgba(50, 50, 51, 0.5);

  // preview-cover
  --#{$name}-preview-cover-color: rgba(0, 0, 0, 0.3);
}

.#{$name} {
  display: flex;
  flex-wrap: wrap;

  input[type='file'] {
    display: none;
  }

  &-select {
    display: inline-block;
  }

  // 内容
  &-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: var(--#{$name}-content-size);
    height: var(--#{$name}-content-size);
    margin: var(--#{$name}-content-margin);
    background: var(--ivue-white-color);
    border-radius: var(--#{$name}-content-radius);
    border: 2px solid var(--ivue-default-color);
    color: var(--#{$name}-content-color);
    cursor: pointer;
    transition: all $ivue-transition-default, color 1ms;

    &:hover {
      border-color: var(--ivue-primary-color);
      color: var(--ivue-primary-color);
    }

    // 图标
    .#{$name}-content__icon {
      margin: 0;
      color: currentColor;
      transition: all $ivue-transition-default;
    }

    // 文件
    &__text {
      margin-top: 5px;
      color: currentColor;
      font-weight: bold;
      transition: all $ivue-transition-default;
    }
  }

  // 只读
  &-readonly {
    &:hover {
      border-color: var(--ivue-default-color);
      color: var(--#{$name}-content-color);
    }
  }

  // 列表
  &-list {
    display: flex;
    flex-wrap: wrap;

    // 图片
    &-image {
      width: var(--#{$name}-content-size);
      height: var(--#{$name}-content-size);
      display: block;
      border-radius: var(--#{$name}-content-radius);
      overflow: hidden;

      &__img {
        width: 100%;
        height: 100%;
      }
    }

    // 图片放大预览
    &-preview {
      position: relative;

      &--image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 12;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        color: var(--ivue-white-color);
        transition: var(--ivue-all-transition);
      }

      &:hover::after {
        opacity: 1;
      }

      &:hover {
        .#{$name}-list-preview--image {
          opacity: 1;
        }
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: var(--ivue-all-transition);
        background-color: var(--#{$name}-mask-color);
        z-index: 10;
        pointer-events: none;
      }

      // 预览图标
      &-icon {
        font-size: var(--#{$name}-loading-size);
        color: var(--ivue-white-color);
      }
    }

    // 蒙层
    &-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--ivue-white-color);
      background-color: var(--#{$name}-mask-color);
      z-index: 5;

      // 信息
      &__message {
        margin-top: 6px;
        padding: 0 4px;
        font-size: var(--ivue-font-small-size);
        line-height: 14px;
      }

      // 图标
      &__icon {
        margin: 0;
      }

      // 加载中
      .ivue-loading-mask {
        position: relative;
        background: none;
      }

      .ivue-loading-spinner {
        position: relative;
        margin-top: 0;
        top: 0;
        width: var(--#{$name}-loading-size);
        height: var(--#{$name}-loading-size);
        color: var(--ivue-white-color);

        .circular {
          width: var(--#{$name}-loading-size);
          height: var(--#{$name}-loading-size);
        }
      }
    }

    // 删除
    .#{$name}-list-remove {
      position: absolute;
      top: 0;
      right: 0;
      font-size: var(--ivue-font-small-size);
      color: var(--ivue-white-color);
      margin: 0;
      width: var(--#{$name}-remove-size);
      height: var(--#{$name}-remove-size);
      min-width: auto;
      background: var(--ivue-black-color);
      border-bottom-left-radius: 50%;
      z-index: 10;
    }

    // 图片项
    &-status {
      position: relative;
      margin: 0 8px 8px 0;
      cursor: pointer;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  // 禁用
  &-disabled {
    border-color: var(--ivue-disabled-color);
    color: var(--ivue-disabled-color);
    cursor: not-allowed;

    &:hover {
      border-color: var(--ivue-disabled-color);
      color: var(--ivue-disabled-color);
    }
  }

  &-drag {
    position: relative;
    text-align: center;
    border: 2px dashed var(--ivue-border-color);
    border-radius: var(--ivue-border-radius);
    background-color: var(--ivue-white-color);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;

    &:hover {
      border: 2px dashed var(--ivue-primary-color);
    }
  }

  &-dragOver {
    border: 2px dashed var(--ivue-primary-color);
  }
}