.default-icon-upload-view {
  display: flex;
  flex-direction: column;
  gap: var(--oio-row-gap);
  height: 100%;

  & > .default-icon-upload {
    &-gallery {
      background-color: var(--oio-background);
      padding: var(--oio-padding);
      height: 100%;

      display: flex;
      flex-direction: column;
      gap: calc(var(--oio-row-gap) * 1.7) calc(var(--oio-row-gap) * 1.5);

      & > .oio-spin-wrapper {
        height: 100%;
        & > .ant-spin-container {
          height: 100%;
        }
      }

      .default-icon-upload-gallery-show {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--oio-row-gap);
      }

      .default-icon-upload-gallery {
        &-group {
          display: flex;
          justify-content: space-between;
          align-items: center;

          & > .oio-default-manage-group {
            margin-top: 0;
          }
        }

        &-content {
          min-height: 300px;
          overflow: auto;
          flex: 1 1 0;
          display: flex;
          align-content: flex-start;
          flex-flow: row wrap;
          gap: var(--oio-row-gap);
        }

        &-empty {
          width: 100%;
          height: 100%;

          .ant-empty-description {
            color: var(--oio-placeholder-color);
          }
        }
      }
    }
  }
}