@ozen-ui/kit/__inner__/esm/components/FileUploader/modules/FileUploaderDrop/FileUploaderDrop.css

React component library

/* stylelint-disable */
.FileUploaderDrop {
  --file-uploader-drop-icon-color: var(--color-content-primary);
  --file-uploader-drop-border-type: dashed;
  --file-uploader-drop-border-size: 1px;
  --file-uploader-drop-label-color: var(--color-content-primary);
  --file-uploader-drop-hint-color: var(--color-content-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-block-size: calc(var(--file-uploader-drop-min-block-size) + var(--file-uploader-drop-block-padding) * 2 + var(--file-uploader-drop-border-size) * 2);
  padding-block: var(--file-uploader-drop-block-padding);
  padding-inline: var(--file-uploader-drop-inline-padding);
  border-radius: var(--border-radius-l);
  border: var(--file-uploader-drop-border-size) var(--file-uploader-drop-border-type);
  border-color: var(--file-uploader-drop-border-base-color);
  background-color: var(--file-uploader-drop-background-base-color);
  transition: border-color var(--transition-default), background-color var(--transition-default);
  box-sizing: border-box;
  justify-content: center;
}
.FileUploaderDrop_size_s {
    --file-uploader-drop-min-block-size: 106px;
    --file-uploader-drop-block-padding: var(--spacing-m);
    --file-uploader-drop-inline-padding: var(--spacing-m);
  }
.FileUploaderDrop_size_s .FileUploaderDrop-Label {
      font: var(--typography-text-s_1-font);
      letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
      text-transform: var(--typography-text-s_1-text_transform, none);
    }
.FileUploaderDrop_size_s .FileUploaderDrop-Hint {
      font: var(--typography-text-s-font);
      letter-spacing: var(--typography-text-s-letter_spacing, 0);
      text-transform: var(--typography-text-s-text_transform, none);
    }
.FileUploaderDrop_size_m {
    --file-uploader-drop-min-block-size: 126px;
    --file-uploader-drop-block-padding: var(--spacing-l);
    --file-uploader-drop-inline-padding: var(--spacing-l);
  }
.FileUploaderDrop_size_m .FileUploaderDrop-Label {
      font: var(--typography-text-m_1-font);
      letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
      text-transform: var(--typography-text-m_1-text_transform, none);
    }
.FileUploaderDrop_size_m .FileUploaderDrop-Hint {
      font: var(--typography-text-m-font);
      letter-spacing: var(--typography-text-m-letter_spacing, 0);
      text-transform: var(--typography-text-m-text_transform, none);
    }
.FileUploaderDrop_size_l {
    --file-uploader-drop-min-block-size: 138px;
    --file-uploader-drop-block-padding: var(--spacing-l);
    --file-uploader-drop-inline-padding: var(--spacing-l);
  }
.FileUploaderDrop_size_l .FileUploaderDrop-Label {
      font: var(--typography-text-l_1-font);
      letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
      text-transform: var(--typography-text-l_1-text_transform, none);
    }
.FileUploaderDrop_size_l .FileUploaderDrop-Hint {
      font: var(--typography-text-l-font);
      letter-spacing: var(--typography-text-l-letter_spacing, 0);
      text-transform: var(--typography-text-l-text_transform, none);
    }
.FileUploaderDrop_variant_main {
    --file-uploader-drop-icon-background-color: var(--color-background-secondary);

    /* Border */
    --file-uploader-drop-border-base-color: var(--color-border-secondary);
    --file-uploader-drop-border-hover-color: var(--color-border-secondary-hover);
    --file-uploader-drop-border-pressed-color: var(--color-border-secondary-pressed);
    --file-uploader-drop-border-drag-color: var(--color-border-action);

    /* Background */
    --file-uploader-drop-background-base-color: var(--color-background-main);
    --file-uploader-drop-background-hover-color: var(--color-background-main-hover);
    --file-uploader-drop-background-pressed-color: var(--color-background-main-hover);
    --file-uploader-drop-background-drag-color: var(--color-background-main-pressed);
  }
.FileUploaderDrop_variant_primary {
    --file-uploader-drop-icon-background-color: var(--color-background-tertiary);

    /* Border */
    --file-uploader-drop-border-base-color: var(--color-border-main);
    --file-uploader-drop-border-hover-color: var(--color-border-main-hover);
    --file-uploader-drop-border-pressed-color: var(--color-border-main-pressed);
    --file-uploader-drop-border-drag-color: var(--color-border-action);

    /* Background */
    --file-uploader-drop-background-base-color: var(--color-background-primary);
    --file-uploader-drop-background-hover-color: var(--color-background-primary-hover);
    --file-uploader-drop-background-pressed-color: var(--color-background-primary-hover);
    --file-uploader-drop-background-drag-color: var(--color-background-primary-pressed);
  }
.FileUploaderDrop_withReactionToClick {
    cursor: pointer;
  }
.FileUploaderDrop_status_default.FileUploaderDrop:hover {
    border-color: var(--file-uploader-drop-border-hover-color);
    background-color: var(--file-uploader-drop-background-hover-color);
  }
.FileUploaderDrop_status_default.FileUploaderDrop:active {
    border-color: var(--file-uploader-drop-border-pressed-color);
    background-color: var(--file-uploader-drop-background-pressed-color);
  }
.FileUploaderDrop_dragging {
    --file-uploader-drop-border-type: solid;
    border-color: var(--file-uploader-drop-border-drag-color);
    background-color: var(--file-uploader-drop-background-drag-color);
  }
.FileUploaderDrop_status_loading {
    border-color: var(--file-uploader-drop-border-base-color);
    background-color: var(--color-background-disabled);
    cursor: wait;
  }
.FileUploaderDrop_status_error.FileUploaderDrop_variant_main {
    border-color: var(--color-border-error);
    background-color: var(--color-background-main)
  }
.FileUploaderDrop_status_error.FileUploaderDrop_variant_primary {
    border-color: var(--color-border-error);
    background-color: var(--color-background-primary)
  }
.FileUploaderDrop_status_disabled {
    --file-uploader-drop-border-type: solid;
    --file-uploader-drop-icon-color: var(--color-content-disabled);
    --file-uploader-drop-label-color: var(--color-content-disabled);
    --file-uploader-drop-hint-color: var(--color-content-disabled);
    border-color: var(--color-border-disabled);
    background-color: var(--color-background-disabled);
    cursor: not-allowed;
  }
.FileUploaderDrop-Icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 100%;
    padding: var(--spacing-2xs);
    background-color: var(--file-uploader-drop-icon-background-color);
    transition: background-color var(--transition-default);
    color: var(--file-uploader-drop-icon-color);
    margin-block-end: var(--spacing-2xs);
    cursor: pointer;
  }
.FileUploaderDrop-Label {
    color: var(--file-uploader-drop-label-color);
    transition: color var(--transition-default);
    text-align: center;
  }
.FileUploaderDrop-Hint {
    margin-block-start: var(--spacing-3xs);
    color: var(--file-uploader-drop-hint-color);
    transition: color var(--transition-default);
    text-align: center;
  }
.FileUploaderDrop-Button {
    margin-block-start: var(--spacing-4xs);
  }