@import '../../style/themes/default';
@import '../../style/mixins';

@imagePickerPrefixCls: am-image-picker;

.@{imagePickerPrefixCls} {
  & &-list {
    padding-top: @v-spacing-md;
    margin-bottom: @h-spacing-lg;
    .@{imagePickerPrefixCls}-item {
      position: relative;
      margin-right: @h-spacing-sm;
      margin-bottom: @v-spacing-sm;
      &:nth-child(4n) {
        margin-right: 0;
      }
      .@{imagePickerPrefixCls}-item-remove {
        width: @icon-size-xxs;
        height: @icon-size-xxs;
        position: absolute;
        right: 12px;
        top: 12px;
        text-align: right;
        vertical-align: top;
        z-index: 2;
        .encoded-svg-background('image_picker_delete');
        background-size: @icon-size-xxs auto;
      }
      .@{imagePickerPrefixCls}-item-content {
        height: 100%;
        width: 100%;
        border-radius: @radius-sm;
        background-size: cover;
      }
      img {
        width: 100%;
      }
    }
    .@{imagePickerPrefixCls}-upload-btn {
      box-sizing: border-box;
      border-radius: @radius-sm;
      border: @border-width-md solid @border-color-base;
      background-color: @fill-base;
      &:before,
      &:after {
        width: @border-width-md;
        height: 50px;
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: @color-text-base;
      }
      &:after {
        width: 50px;
        height: @border-width-md;
      }
      &-active {
        background-color: @fill-tap;
      }

      input {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
      }
    }
  }
}