<svelte:options customElement={{ tag: 'm-file-uploader' }} />

<script lang="ts">
  import FileUploaderItem, {
    type NormalizedFile,
  } from '../fileuploaderitem/FileUploaderItem.svelte';
  import { Upload24 } from '@mozaic-ds/icons-svelte';

  type FilesValidationState = Record<
    string,
    { size: boolean; extension: boolean; customValidation: boolean }
  >;

  /**
   * A file uploader allows users to upload one or multiple files by either dragging and dropping files into a dedicated area or selecting them manually through their local folders. It provides real-time feedback on upload progress and file status, including file name, size, and success or error indicators. File uploaders are commonly used in forms, content management systems, and document submission processes to facilitate seamless file handling.
   *
   * @slot name - Use this slot to display a custom file name.
   * @slot information - Use this slot to display a custom information content.
   * @slot errorMessage - Use this slot to display a custom error message.
   * @event files-update {CustomEvent<NormalizedFile[]>} - Emits when files list changes.
   * @event validation {CustomEvent<FilesValidationState>} - Emits files validation when files list changes.
   */

  interface Props {
    [key: string]: any;
    /**
     * Model binding for the selected files (`NormalizedFile`)
     */
    files: NormalizedFile[];
    /**
     * File types allowed by the uploader.
     */
    accept?: HTMLInputElement['accept'];
    /**
     * Enables selecting multiple files at once.
     */
    multiple?: boolean;
    /**
     * File extensions to validate.
     */
    allowedextensions?: string[];
    /**
     * Maximum file size allowed (in bytes).
     */
    maxsize?: number;
    /**
     * Custom validation rules applied to each file.
     */
    rules?: ((file: NormalizedFile) => boolean)[];
    /**
     * Layout format of the item.
     */
    format?: 'inline' | 'stacked';
    /**
     * Custom error message for the file.
     */
    errormessage?: string;
    /**
     * Label for the delete button.
     */
    deletebuttonlabel?: string;
    /**
     * Optional informational text displayed under the file name.
     */
    information?: string;
    /**
     * Enables drag & drop functionality.
     */
    hasdragdrop?: boolean;
    /**
     * Controls the display of the uploaded files list.
     */
    showfileslist?: boolean;
    /**
     * Disables the whole component.
     */
    disabled?: boolean;
    /**
     * Main drag & drop title.
     */
    title?: string;
    /**
     * Subtitle used in the drag & drop area.
     */
    subtitle?: string;
    /**
     * Label of the upload button.
     */
    uploadbuttonlabel?: string;
    /**
     * Callback to call when files validation is updated.
     */
    onvalidation?: (validationState: FilesValidationState) => void;
    /**
     * Callback to call when files are updates.
     */
    onfilesupdate?: (files: NormalizedFile[]) => void;
  }

  let {
    files = $bindable(),
    accept,
    multiple,
    allowedextensions,
    maxsize,
    rules,
    hasdragdrop = true,
    showfileslist = true,
    disabled,
    title = 'Drag & drop',
    subtitle = 'or',
    uploadbuttonlabel = 'Upload file(s)',
    format = 'inline',
    errormessage,
    deletebuttonlabel,
    information,
    onvalidation,
    onfilesupdate,
    class: className,
    ...attrs
  }: Props = $props();

  let element: HTMLElement;

  let filesValidationState = $derived(validateFiles(files));

  let fileInput: HTMLInputElement;

  let isDraggedOver = $state(false);
  let dragCounter = $state(0);

  function validateFiles(newFiles: NormalizedFile[] = []) {
    const state: FilesValidationState = {};
    newFiles.forEach((file) => {
      const extension = file.name.split('.').pop()?.toLowerCase() || '';
      state[file.name] = {
        size: maxsize && file.size ? file.size <= maxsize : true,
        extension: allowedextensions ? allowedextensions.includes(extension) : true,
        customValidation: rules?.every((rule) => rule(file)) ?? true,
      };
    });
    return state;
  }

  $effect(() => {
    onfilesupdate?.(files);
    const event = new CustomEvent('files-update', {
      detail: files,
      bubbles: true,
      composed: true,
    });
    element.dispatchEvent(event);

    if (files?.length > 0) {
      onvalidation?.(filesValidationState);

      const event = new CustomEvent('validation', {
        detail: filesValidationState,
        bubbles: true,
        composed: true,
      });
      element.dispatchEvent(event);
    }
  });

  function onDragEnter(e: Event) {
    if (!hasdragdrop) return;

    e.preventDefault();
    dragCounter++;
    isDraggedOver = true;
  }

  function onDragLeave(e: Event) {
    if (!hasdragdrop) return;

    e.preventDefault();
    dragCounter--;
    if (dragCounter === 0) isDraggedOver = false;
  }

  function filterExistingFile(file: NormalizedFile) {
    return files?.every((item) => item.name !== file.name);
  }

  function onChange(e: Event) {
    const input = e.target as HTMLInputElement;
    const newFiles = Array.from(input.files || []).filter(filterExistingFile);

    if (!newFiles.length) {
      input.value = '';
      return;
    }

    files = multiple ? [...files, ...newFiles] : newFiles.slice(0, 1);

    input.value = '';
  }

  function onDragover(e: DragEvent) {
    e.preventDefault();
  }

  function onDrop(e: DragEvent) {
    if (!hasdragdrop) return;

    e.preventDefault();
    e.stopPropagation();

    dragCounter = 0;
    isDraggedOver = false;
    if (disabled) return;

    const droppedFiles = Array.from(e.dataTransfer?.files || []).filter(filterExistingFile);
    if (!droppedFiles.length) return;

    files = multiple ? [...files, ...droppedFiles] : [droppedFiles[0]];
  }

  function onKeydown(e: KeyboardEvent) {
    if (e.key === ' ' || e.key === 'Enter') {
      e.preventDefault();
      fileInput.click();
    }
  }

  function onDelete(index: number) {
    files = files?.filter((_, i) => i !== index);
  }

  function isFileValid(file: NormalizedFile) {
    return Object.values(filesValidationState[file.name] ?? {}).every(Boolean);
  }
</script>

<div
  class={{
    'mc-file-uploader': true,
    'mc-file-uploader--draggable': hasdragdrop,
    className,
  }}
  bind:this={element}
>
  <div class="mc-file-uploader__container">
    <input
      bind:this={fileInput}
      type="file"
      aria-label="File input"
      {accept}
      {multiple}
      class="mc-file-uploader__hidden-input"
      {disabled}
      aria-disabled={disabled}
      onchange={onChange}
      {...attrs}
    />

    <div
      class={{
        'mc-file-uploader__input': true,
        'mc-file-uploader__input--dragged': isDraggedOver,
        'mc-file-uploader__input--disabled': disabled,
      }}
      tabindex="0"
      role="button"
      aria-disabled={disabled}
      ondragover={onDragover}
      ondrop={onDrop}
      ondragenter={onDragEnter}
      ondragleave={onDragLeave}
      onclick={() => fileInput!.click()}
      onkeydown={onKeydown}
    >
      {#if hasdragdrop}
        <span class="mc-file-uploader__input-title">
          {title}
        </span>

        <span class="mc-file-uploader__input-subtitle">
          {subtitle}
        </span>
      {/if}

      <div class="mc-button mc-button--outlined mc-file-uploader__button">
        <Upload24 className="mc-button__icon" />
        <span class="mc-button__label">
          {uploadbuttonlabel}
        </span>
      </div>
    </div>
  </div>

  {#if showfileslist}
    <div class="mc-file-uploader__files-list">
      {#each files as file, index (index)}
        <FileUploaderItem
          {file}
          {format}
          {errormessage}
          {information}
          {deletebuttonlabel}
          valid={isFileValid(file)}
          ondelete={() => onDelete(index)}
        >
          <slot slot="name" name="name" let:file {file}>
            {file.name}
          </slot>

          <slot slot="information" name="information" let:file {file}>
            {information}
          </slot>

          <slot
            slot="errorMessage"
            name="errorMessage"
            validationState={filesValidationState[file.name]}
          ></slot>
        </FileUploaderItem>
      {/each}
    </div>
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-file-uploader {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
}
.mc-file-uploader__files-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mc-file-uploader__hidden-input {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  padding: 0;
  width: 1px;
}
.mc-file-uploader__input {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-semi-bold, 600);
  border-radius: var(--border-radius-m, 0.5rem);
  color: var(--file-uploader-color-drag-and-drop-text-default, #242938);
}
.mc-file-uploader__input .mc-file-uploader__button {
  width: 100%;
}
.mc-file-uploader__input--disabled .mc-file-uploader__button.mc-button.mc-button--outlined {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-file-uploader__input-title {
  height: 1.125rem;
  font-size: var(--font-size-150, 1rem);
}
.mc-file-uploader__input-subtitle {
  height: 1.125rem;
  font-size: var(--font-size-100, 0.875rem);
}
.mc-file-uploader--draggable .mc-file-uploader__input {
  padding: 2rem;
  outline: 0.125rem dashed var(--file-uploader-color-drag-and-drop-border-default, #464e63);
  display: flex;
}
.mc-file-uploader--draggable .mc-file-uploader__input--disabled {
  outline-color: var(--file-uploader-color-drag-and-drop-border-disabled, #b3b3b3);
  color: var(--file-uploader-color-drag-and-drop-text-disabled, #b3b3b3);
  cursor: not-allowed;
}
.mc-file-uploader--draggable .mc-file-uploader__input--dragged {
  outline-width: 0.25rem;
}

.mc-file-uploader-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mc-file-uploader-item__container {
  border: 1px solid var(--file-uploader-color-file-item-border-default, #cccccc);
  border-radius: var(--border-radius-m, 0.5rem);
  padding: 0.75rem;
}
.mc-file-uploader-item__meta-row {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.mc-file-uploader-item__meta-row--with-info {
  align-items: start;
}
.mc-file-uploader-item__status-icon {
  fill: var(--file-uploader-color-file-item-icon-valid, #3f9e10);
}
.mc-file-uploader-item__info-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-left: 0.5rem;
  padding-right: 1rem;
}
.mc-file-uploader-item__label {
  color: var(--file-uploader-color-file-item-text-file-name, #000000);
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-semi-bold, 600);
}
.mc-file-uploader-item__details {
  color: var(--file-uploader-color-file-item-text-information, #666666);
  font-size: var(--font-size-50, 0.75rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
}
.mc-file-uploader-item__error-message {
  color: var(--field-color-validation-invalid, #c61112);
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
}
.mc-file-uploader-item__container--inline {
  display: flex;
  align-items: center;
}
.mc-file-uploader-item__container--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mc-file-uploader-item__delete-button-container {
  padding-left: 0.25rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--divider-color-primary, #cccccc);
}
.mc-file-uploader-item__actions-container {
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: center;
}
.mc-file-uploader-item__action {
  padding: 0 0.75rem;
  flex-grow: 1;
}
.mc-file-uploader-item--error .mc-file-uploader-item__container {
  border-width: var(--border-width-m, 0.125rem);
  border-color: var(--file-uploader-color-file-item-border-invalid, #ea302d);
}
.mc-file-uploader-item--error .mc-file-uploader-item__status-icon {
  fill: var(--file-uploader-color-file-item-icon-invalid, #ea302d);
}
.mc-file-uploader-item--loading .mc-file-uploader-item__container {
  gap: 1rem;
  flex-direction: column;
  align-items: normal;
}
.mc-file-uploader-item--loading .mc-file-uploader-item__status-icon {
  fill: var(--color-standalone-disabled, #b3b3b3);
}
.mc-file-uploader-item--loading .mc-file-uploader-item__label,
.mc-file-uploader-item--loading .mc-file-uploader-item__details {
  color: var(--color-standalone-disabled, #b3b3b3);
}

.mc-button {
  color: var(--button-color-filled-standard-font, #ffffff);
  background-color: var(--button-color-filled-standard-background, #464e63);
}
.mc-button:hover {
  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
}
.mc-button:active {
  background-color: var(--button-color-filled-standard-active-background, #242938);
}
.mc-button:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button {
  font-weight: var(--font-weight-semi-bold, 600);
  padding: 0 calc(1rem - 0.125rem);
  min-height: 3rem;
  min-width: 3rem;
  border-radius: var(--button-border-radius-m, 0.25rem);
}
.mc-button .mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button {
  display: inline-flex;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  border: 2px solid transparent;
  transition: all ease 200ms;
  transition: box-shadow 200ms ease;
  align-items: center;
  box-sizing: border-box;
  font-family: inherit;
  fill: currentcolor;
  gap: 0.25rem;
  cursor: pointer;
}
.mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-button--s {
  padding: 0 calc(0.75rem - 0.125rem);
  min-height: 2rem;
  min-width: 2rem;
  border-radius: var(--button-border-radius-s, 0.25rem);
}
.mc-button--s .mc-button__label {
  font-size: var(--font-size-100, 0.875rem);
}
.mc-button--s .mc-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-button--s .mc-button__icon:only-child {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-button--m {
  padding: 0 calc(1rem - 0.125rem);
  min-height: 3rem;
  min-width: 3rem;
  border-radius: var(--button-border-radius-m, 0.25rem);
}
.mc-button--m .mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button--m .mc-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button--m .mc-button__icon:only-child {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button--l {
  padding: 0 calc(1.25rem - 0.125rem);
  min-height: 4rem;
  min-width: 4rem;
  border-radius: var(--button-border-radius-l, 0.25rem);
}
.mc-button--l .mc-button__label {
  font-size: var(--font-size-200, 1.125rem);
}
.mc-button--l .mc-button__icon {
  width: 2rem;
  height: 2rem;
}
.mc-button--l .mc-button__icon:only-child {
  width: 2rem;
  height: 2rem;
}
.mc-button--icon-only {
  padding: 0.25rem;
}
.mc-button--outlined {
  color: var(--button-color-outlined-standard-font, #242938);
  border-color: var(--button-color-outlined-standard-border, #8891aa);
  background-color: var(--button-color-outlined-standard-background, #ffffff);
}
.mc-button--outlined:hover {
  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
}
.mc-button--outlined:active {
  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
}
.mc-button--outlined:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost {
  color: var(--button-color-ghost-standard-font, #242938);
  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost:hover {
  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
}
.mc-button--ghost:active {
  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
}
.mc-button--ghost:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--accent {
  color: var(--button-color-filled-accent-font, #ffffff);
  background-color: var(--button-color-filled-accent-background, #117f03);
}
.mc-button--accent:hover {
  background-color: var(--button-color-filled-accent-hover-background, #006902);
}
.mc-button--accent:active {
  background-color: var(--button-color-filled-accent-active-background, #035010);
}
.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--danger {
  color: var(--button-color-filled-danger-font, #ffffff);
  background-color: var(--button-color-filled-danger-background, #c61112);
}
.mc-button--danger:hover {
  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
}
.mc-button--danger:active {
  background-color: var(--button-color-filled-danger-active-background, #530000);
}
.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--inverse {
  --focus-color-mid: var(--focus-color-outline-outer, #000000);
  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
  color: var(--button-color-filled-inverse-font, #242938);
  background-color: var(--button-color-filled-inverse-background, #ffffff);
}
.mc-button--inverse:hover {
  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
}
.mc-button--inverse:active {
  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
}
.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--icon-button {
  border-radius: var(--border-radius-full, 100%);
  padding: 0;
}
.mc-button--loading {
  pointer-events: none;
}
.mc-button--loading .mc-button__loader {
  position: absolute;
  color: currentcolor;
}
.mc-button--loading .mc-button__label,
.mc-button--loading .mc-button__icon {
  visibility: hidden;
}
.mc-button--outlined.mc-button--standard {
  color: var(--button-color-outlined-standard-font, #242938);
  border-color: var(--button-color-outlined-standard-border, #8891aa);
  background-color: var(--button-color-outlined-standard-background, #ffffff);
}
.mc-button--outlined.mc-button--standard:hover {
  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
}
.mc-button--outlined.mc-button--standard:active {
  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
}
.mc-button--outlined.mc-button--standard:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--accent {
  color: var(--button-color-outlined-accent-font, #117f03);
  border-color: var(--button-color-outlined-accent-border, #78be20);
  background-color: var(--button-color-outlined-accent-background, #ffffff);
}
.mc-button--outlined.mc-button--accent:hover {
  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
}
.mc-button--outlined.mc-button--accent:active {
  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
}
.mc-button--outlined.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--danger {
  color: var(--button-color-outlined-danger-font, #c61112);
  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
  background-color: var(--button-color-outlined-danger-background, #ffffff);
}
.mc-button--outlined.mc-button--danger:hover {
  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
}
.mc-button--outlined.mc-button--danger:active {
  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
}
.mc-button--outlined.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--inverse {
  color: var(--button-color-outlined-inverse-font, #ffffff);
  border-color: var(--button-color-outlined-inverse-border, #ffffff);
  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
}
.mc-button--outlined.mc-button--inverse:hover {
  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
}
.mc-button--outlined.mc-button--inverse:active {
  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
}
.mc-button--outlined.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--standard {
  color: var(--button-color-ghost-standard-font, #242938);
  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--standard:hover {
  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
}
.mc-button--ghost.mc-button--standard:active {
  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
}
.mc-button--ghost.mc-button--standard:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--accent {
  color: var(--button-color-ghost-accent-font, #117f03);
  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--accent:hover {
  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
}
.mc-button--ghost.mc-button--accent:active {
  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
}
.mc-button--ghost.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--danger {
  color: var(--button-color-ghost-danger-font, #c61112);
  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--danger:hover {
  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
}
.mc-button--ghost.mc-button--danger:active {
  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
}
.mc-button--ghost.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--inverse {
  color: var(--button-color-ghost-inverse-font, #ffffff);
  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--inverse:hover {
  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
}
.mc-button--ghost.mc-button--inverse:active {
  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
}
.mc-button--ghost.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}</style>
