@st-namespace 'FileUpload-st-css';
@st-import [ --wix-color-5, --wix-color-4, --wix-color-40, --wix-color-38, --wix-color-39 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ setColor, setFont, setVar, createColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor-rgb ] from  '../../common/palette.st.css';
@st-import Spinner from '../Spinner/Spinner.st.css';
@st-import [ --wst-links-and-actions-color-rgb, --wst-paragraph-2-color-rgb, --wst-system-error-color-rgb, --wst-button-primary-color-rgb, --wst-paragraph-3-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * Popover padding
 * @type size
 */
@property st-global(--wix-ui-tpa-popover-padding);
/*
 * Label font color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-label-font-color);
/*
 * Label font
 * @type font
 */
@property st-global(--wix-ui-tpa-file-upload-label-font);
/*
 * Explanation font color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-explanation-text-color);
/*
 * Explanation font
 * @type font
 */
@property st-global(--wix-ui-tpa-file-upload-explanation-text-font);
/*
 * Button background color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-button-background-color);
/*
 * Button hover background color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-button-hover-background-color);
/*
 * Button border color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-button-border-color);
/*
 * Button border width
 * @type size
 */
@property st-global(--wix-ui-tpa-file-upload-button-border-width);
/*
 * Button border radius
 * @type size
 */
@property st-global(--wix-ui-tpa-file-upload-button-border-radius);
/*
 * Button text color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-button-text-color);
/*
 * Button hover text color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-button-hover-text-color);
/*
 * Files text font
 * @type font
 */
@property st-global(--wix-ui-tpa-file-upload-files-text-font);
/*
 * Files text color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-files-text-color);
/*
 * Delete icon color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-delete-icon-color);
/*
 * Delete icon size
 * @type size
 */
@property st-global(--wix-ui-tpa-file-upload-delete-icon-size);
/*
 * Spinner icon color
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-spinner-icon-color);
/*
 * Spinner icon size
 * @type size
 */
@property st-global(--wix-ui-tpa-file-upload-spinner-icon-size);
/*
 * Error colour
 * @type color
 */
@property st-global(--wix-ui-tpa-file-upload-error-color);

.root {
  --error-color: createColor(--wix-ui-tpa-file-upload-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "14px", "line-height": "1.4" }'),
  setFont(--wix-ui-tpa-fieldset-main-label-font, (--wix-ui-tpa-file-upload-label-font, --wst-paragraph-2-overriden-font), 'Body-M'),
  setColor(--wix-ui-tpa-fieldset-main-label-text-color, --wix-ui-tpa-file-upload-label-font-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
  setColor(--wix-ui-tpa-fieldset-error-color, --wix-ui-tpa-file-upload-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb)));
}

.mainContainer {
  display: inline-flex;
  flex-direction: column;
}

.input {
  display: none;
}

.button {
  -st-mixin:
    setColor(--wix-ui-tpa-button-main-border-color, --wix-ui-tpa-file-upload-button-border-color, var(--wix-color-39)),
    setVar(--wix-ui-tpa-button-main-border-width, --wix-ui-tpa-file-upload-button-border-width),
    setVar(--wix-ui-tpa-button-main-border-radius, --wix-ui-tpa-file-upload-button-border-radius),
    setColor(--wix-ui-tpa-button-main-background-color, --wix-ui-tpa-file-upload-button-background-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-38))),
    setColor(--wix-ui-tpa-button-main-text-color, --wix-ui-tpa-file-upload-button-text-color, var(--wst-button-primary-color-rgb, var(--wix-color-40))),
    setColor(--wix-ui-tpa-button-hover-background-color, --wix-ui-tpa-file-upload-button-hover-background-color),
    setColor(--wix-ui-tpa-button-hover-text-color, --wix-ui-tpa-file-upload-button-hover-text-color);
  width: fit-content;
}

.explanation {
  -st-mixin: setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-file-upload-explanation-text-font, 'Body-M', '{"size": "14px", "line-height": "1.4"}'),
  setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-file-upload-explanation-text-color, var(--wst-paragraph-3-color-rgb, var(--wix-color-4)));
  margin-top: 8px;
}

.multipleFileExplanation {
  -st-states: error;
  -st-mixin: setColor(--wix-ui-tpa-text-button-main-text-color, --wix-ui-tpa-file-upload-files-text-color, var(--wix-color-5)),
  setFont(--wix-ui-tpa-text-button-main-text-font, --wix-ui-tpa-file-upload-files-text-font, 'Body-M', '{"size": "14px", "line-height": "1.4"}');
  margin-top: 8px;
}

.multipleFileExplanation:error {
  -st-mixin: setColor(--wix-ui-tpa-text-button-main-text-color, --wix-ui-tpa-file-upload-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))),
  setFont(--wix-ui-tpa-text-button-main-text-font, --wix-ui-tpa-file-upload-files-text-font, 'Body-M', '{"size": "14px", "line-height": "1.4"}');
}

.files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fileError {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--error-color);
  margin-top: 8px;
}

.filesErrorMessage {
  -st-mixin: setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-file-upload-error-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))),
  setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-file-upload-files-text-font, 'Body-M', '{ "size": "14px", "line-height": "1.4" }');
}

.fileErrorIcon {
  color: var(--error-color);
}

.popover {
  --wix-ui-tpa-popover-padding: 12px 24px;
}

.fileContainer {
  -st-states: error;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.file {
  -st-mixin: createFont(--wix-ui-tpa-file-upload-files-text-font, 'Body-M', '{ "size": "14px", "line-height": "1.4em" }');
  color: createColor(--wix-ui-tpa-file-upload-files-text-color, var(--wix-color-5));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fileContainer:error .file,
.fileContainer:error:focus .file {
  color: var(--error-color);
}

.fileContainer .delete svg {
  width: 20px;
  height: 20px;
}

.fileContainer:error .delete svg {
  color: var(--error-color);
}

.spinner {
  -st-extends: Spinner;

  width: var(--wix-ui-tpa-file-upload-spinner-icon-size, 16px) !important;
  height: var(--wix-ui-tpa-file-upload-spinner-icon-size, 16px) !important;
}

.spinner::circle {
  stroke: createColor(--wix-ui-tpa-file-upload-spinner-icon-color, var(--wst-button-primary-color-rgb, var(--wix-color-5)));
}

.oneFile {
  margin-top: 8px;
  width: 0;
  min-width: 100%;
}

.multipleFiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fileUploadIndicator {
  width: 20px;
  display: flex;
  justify-content: center;
}

/* st-namespace-reference="../../../../src/components/FileUpload/FileUpload.st.css" */