@import 'src/global/styles/var';

.glue-uploader-preview-item {
  position: relative;
  margin: 0 @padding-xs @padding-xs 0;
  cursor: pointer;
  &__mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: @white;
    background-color: @uploader-mask-background-color;

    &-icon {
      font-size: @uploader-mask-icon-size;
    }

    &-message {
      margin-top: 6px;
      padding: 0 @padding-base;
      font-size: @uploader-mask-message-font-size;
      line-height: @uploader-mask-message-line-height;
    }
  }
  &-image {
    display: block;
    width: @uploader-size;
    height: @uploader-size;
    overflow: hidden;
  }

  &-delete {
    position: absolute;
    top: 0;
    right: 0;
    width: @uploader-delete-icon-size;
    height: @uploader-delete-icon-size;
    background-color: @uploader-delete-background-color;
    border-radius: 0 0 0 12px;

    &-icon {
      position: absolute;
      top: -6px;
      right: -6px;
      color: #fff;
      color: @uploader-delete-color;
      font-size: 16px;
      transform: scale(0.5);
    }
  }

  &-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
