@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. fileUpload) */
.upload-area__3SxAA {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  border: 1px solid var(--click-fileUpload-color-stroke-default);
  background-color: var(--click-fileUpload-color-background-default);
  transition: var(--click-fileUpload-transitions-all);
  /* stylelint-disable-next-line container-name-pattern, value-keyword-case -- preserve original container-name from styled-components */
  container-name: uploadArea;
  container-type: inline-size;
}

/* border-radius: hasFile ? sm : md */
.upload-area_radius_sm__DW4eQ {
  border-radius: var(--click-fileUpload-sm-radii-all);
}

.upload-area_radius_md__k9cZA {
  border-radius: var(--click-fileUpload-md-radii-all);
}

/* padding: hasFile || size === 'sm' ? sm : md */
.upload-area_padding_sm__ci1xq {
  padding: var(--click-fileUpload-sm-space-y) var(--click-fileUpload-sm-space-x);
}

.upload-area_padding_md__SflJQ {
  padding: var(--click-fileUpload-md-space-y) var(--click-fileUpload-md-space-x);
}

/* min-height: size === 'sm' ? calc : auto */
.upload-area_min-height_sm__JmKFU {
  min-height: calc(var(--click-fileUpload-sm-space-y) * 2 + var(--sizes-8));
}

.upload-area_min-height_md__7BUe3 {
  min-height: auto;
}

/* flex-direction: hasFile ? row : size === 'sm' ? row : column */
.upload-area_direction_row__dPIPY {
  flex-direction: row;
}

.upload-area_direction_column__Yd-Y9 {
  flex-direction: column;
}

/* justify-content: hasFile ? space-between : size === 'sm' ? space-between : center */
.upload-area_justify_space-between__8kSQQ {
  justify-content: space-between;
}

.upload-area_justify_center__vW-59 {
  justify-content: center;
}

/* gap: size === 'sm' ? sm : md */
.upload-area_gap_sm__fRrTo {
  gap: var(--click-fileUpload-sm-space-gap);
}

.upload-area_gap_md__gndXo {
  gap: var(--click-fileUpload-md-space-gap);
}

/* cursor: hasFile ? default : pointer */
.upload-area_cursor_default__Yrr8K {
  cursor: default;
}

.upload-area_cursor_pointer__nnHd9 {
  cursor: pointer;
}

/* !hasFile: dashed border */
.upload-area_dashed_true__-dB8w {
  border-style: dashed;
  border-color: var(--click-fileUpload-color-stroke-default);
}

/* !hasFile && isDragging */
.upload-area_dragging_true__wzFjV {
  border-color: var(--click-fileUpload-color-stroke-active);
  background-color: var(--click-fileUpload-color-background-active);
}

/* isError */
.upload-area_error_true__gIe8y {
  border-color: transparent;
  background-color: var(--click-fileUpload-color-background-error);
}

.title__1rLes {
  color: var(--click-fileUpload-color-title-default);
  font: var(--click-fileUpload-typography-title-default);
}

.title_not-supported_true__o7ZXZ {
  color: var(--click-fileUpload-color-title-error);
}

.description__QyVSQ {
  color: var(--click-fileUpload-color-description-default);
  font: var(--click-fileUpload-typography-description-default);
}

.upload-icon__CeL3E svg {
  width: var(--click-fileUpload-md-icon-size-width);
  height: var(--click-fileUpload-md-icon-size-height);
  color: var(--click-fileUpload-md-color-icon-default);
}

.upload-text__4oGA- {
  text-align: left;
}

.upload-text_centered_true__brhHN {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.upload-text_grow_true__9MNMX {
  flex: 1;
}
}