@st-namespace 'FileUpload-deprecated-st-css';
:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, font, fallback;
}

:import {
  -st-from: "../Spinner/Spinner.deprecated.st.css";
  -st-default: Spinner;
}

:import {
  -st-from: "../Popover/Popover.deprecated.st.css";
  -st-default: Popover;
}

:import {
  -st-from: '../internal/Fieldset/Fieldset.deprecated.st.css';
  -st-default: Fieldset;
}

:import {
  -st-from: "../Button/Button.deprecated.st.css";
  -st-default: TPAButton;
}

:import {
  -st-from: "../Text/Text.deprecated.st.css";
  -st-default: TPAText;
}

:import {
    -st-from: "../TextButton/TextButton.deprecated.st.css";
    -st-default: TextButton;
}

/* Constants */
:vars {
  PopoverPadding: 12px 24px;
}

/* Defaults - default params */
:vars {
  DefaultLabelFontColor: color(color-5);
  DefaultLabelFont: font("{theme: 'Body-M', size: '14px', lineHeight: '1.4'}");
  DefaultExplanationTextColor: color(color-4);
  DefaultExplanationTextFont: font("{theme: 'Body-M', size: '14px', lineHeight: '1.4'}");
  DefaultButtonBackgroundColor: color(color-8);
  DefaultButtonTextColor: color(color-1);
  DefaultFilesTextFont: font("{theme: 'Body-M', size: '14px', lineHeight: '1.4'}");
  DefaultFilesTextColor: color(color-5);
  DefaultSpinnerIconColor: color(color-5);
  DefaultSpinnerIconSize: 16px;
  DefaultErrorColor: color(#DF3131);
}

/* Overrides - declaration of overridable parameters by the consumer */
:vars {
  /*
    Label font color
  */
  LabelFontColor: --overridable;
  /*
    Label font
  */
  LabelFont: --overridable;
  /*
    Explanation font color
  */
  ExplanationTextColor: --overridable;
  /*
    Explanation font
  */
  ExplanationTextFont: --overridable;
  /*
    Button background color
  */
  ButtonBackgroundColor: --overridable;
  /*
    Button hover background color
  */
  ButtonHoverBackgroundColor: --overridable;
  /*
    Button border color
  */
  ButtonBorderColor: --overridable;
  /*
    Button border width
  */
  ButtonBorderWidth: --overridable;
  /*
    Button border radius
  */
  ButtonBorderRadius: --overridable;
  /*
    Button text color
  */
  ButtonTextColor: --overridable;
  /*
    Button hover text color
  */
  ButtonHoverTextColor: --overridable;
  /*
    Files text font
  */
  FilesTextFont: --overridable;
  /*
    Files text color
  */
  FilesTextColor: --overridable;
  /*
    Spinner icon color
  */
  SpinnerIconColor: --overridable;
  /*
    Spinner icon size
  */
  SpinnerIconSize: --overridable;
  /*
    Error colour
  */
  ErrorColor: --overridable;
}
/*
 * 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);

/* Overrides */
:vars {
  labelFontColor: color(fallback(value(LabelFontColor), value(DefaultLabelFontColor)));
  labelFont: font(fallback(value(LabelFont), value(DefaultLabelFont)));
  explanationTextColor: color(fallback(value(ExplanationTextColor), value(DefaultExplanationTextColor)));
  explanationTextFont: font(fallback(value(ExplanationTextFont), value(DefaultExplanationTextFont)));
  buttonBackgroundColor: color(fallback(value(ButtonBackgroundColor), value(DefaultButtonBackgroundColor)));
  buttonTextColor: color(fallback(value(ButtonTextColor), value(DefaultButtonTextColor)));
  filesTextFont: font(fallback(value(FilesTextFont), value(DefaultFilesTextFont)));
  filesTextColor: color(fallback(value(FilesTextColor), value(DefaultFilesTextColor)));
  spinnerIconColor: color(fallback(value(SpinnerIconColor), value(DefaultSpinnerIconColor)));
  spinnerIconSize: fallback(value(SpinnerIconSize), value(DefaultSpinnerIconSize));
  errorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

.root {
  -st-mixin: Fieldset(
      MainLabelFont font(value(labelFont)),
      MainLabelTextColor color(value(labelFontColor)),
      ErrorColor color(value(errorColor)),
    );
}

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

.input {
  display: none;
}

.button {
  -st-mixin: TPAButton(
      MainBorderColor color(value(ButtonBorderColor)),
      MainBorderWidth value(ButtonBorderWidth),
      MainBorderRadius value(ButtonBorderRadius),
      MainBackgroundColor value(buttonBackgroundColor),
      MainTextColor value(buttonTextColor),
      HoverBackgroundColor color(value(ButtonHoverBackgroundColor)),
      HoverTextColor color(value(ButtonHoverTextColor)),
    );
  width: fit-content;
}

.explanation {
  -st-mixin: TPAText(
    MainTextFont value(explanationTextFont),
    MainTextColor value(explanationTextColor)
  );
  margin-top: 8px;
}

.multipleFileExplanation {
  -st-states: error;
  -st-mixin: TextButton(
    MainTextColor value(filesTextColor),
    MainTextFont value(filesTextFont)
  );
  margin-top: 8px;
}

.multipleFileExplanation:error {
  -st-mixin: TextButton(
    MainTextColor value(errorColor),
    MainTextFont value(filesTextFont)
  );
}

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

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

.filesErrorMessage {
  -st-mixin: TPAText(
    MainTextColor value(errorColor),
    MainTextFont value(filesTextFont)
  );
}

.fileErrorIcon {
  color: value(errorColor);
}

.popover {
  -st-mixin: Popover(Padding value(PopoverPadding));
}

.fileContainer {
  -st-states: error;

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

.file {
  font: value(filesTextFont) !important;
  color: value(filesTextColor);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fileContainer:error .file,
.fileContainer:error:focus .file  {
  color: value(errorColor);
}

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

.fileContainer:error .delete svg {
  color: value(errorColor);
}

.spinner {
  -st-extends: Spinner;

  width: value(spinnerIconSize) !important;
  height: value(spinnerIconSize) !important;
}

.spinner::circle {
  stroke: value(spinnerIconColor);
}

.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.deprecated.st.css" */