/**
 * Sample theme for client overrides for Verdocs Web SDK default styles.
 * Customize and include this file in your project to override default styles.
 */

/* Remove the .verdocs-custom-theme if you are customizing this file. */
/* It is here to support Storybook presentation in our documentation. */
:root.verdocs-custom-theme {
  /* Global Theming */
  --verdocs-primary-color: #0065ff;
  --verdocs-primary-color-hover: #0054dc;
  /* NOTE: This is not an Open Source / Google font. Just illustrating it here as an example. */
  --verdocs-primary-font: 'Segoe UI', 'Inter', sans-serif;
  --verdocs-button-radius: 8px;
  --verdocs-dialog-radius: 8px;
  --verdocs-dialog-icon-color: #ffffff;
  --verdocs-close-button-color: #6b7280;
  --verdocs-close-button-hover-color: #111827;
  --verdocs-close-button-hover-bg: #f3f4f6;

  /* Buttons */
  --verdocs-button-secondary-bg: #6366f1;
  /* Example purple */
  --verdocs-button-secondary-color: #374151;
  --verdocs-button-secondary-border: 1px solid #d1d5db;
  --verdocs-button-secondary-hover-bg: #f9fafb;
  --verdocs-button-disabled-bg: #e5e7eb;
  --verdocs-button-disabled-color: #9ca3af;

  /* Inputs */
  --verdocs-input-border-bottom-color: #616161;

  /* Dialogs */
  --verdocs-dialog-backdrop-color: rgba(66, 66, 66, 0.25);
  --verdocs-dialog-backdrop-filter: blur(4px);
  --verdocs-dialog-title-weight: 600;
  --verdocs-bullet-color: #707070;
  --verdocs-link-color: #0054dc;
  --verdocs-link-border: 1px solid #0054dc;
  --verdocs-checkbox-color: #0065ff;

  /* Signing Fields */
  --verdocs-field-background: rgba(26, 115, 232, 0.1);
  --verdocs-field-border: none;
  --verdocs-required-field-border: transparent;
  --verdocs-field-radius: 4px;
  --verdocs-field-text-color: #ffffff;
  --verdocs-attachment-icon-color: #ffffff;

  /* Signer Colors (Override Theme) */
  --signer-1-color: #13a10e;
  --signer-2-color: #021cc4;
  --signer-3-color: #a34ed4;
  --signer-4-color: #be9202;
  --signer-5-color: #8ba700;
  --signer-6-color: #0065ff;
  --signer-7-color: #e04aa4;
  --signer-8-color: #39804c;
  --signer-9-color: #02a2be;
  --signer-10-color: #e57200;

  /* Signer Colors Faded (Override 75%) */
  --signer-1-color-faded: #13a10ebf;
  --signer-2-color-faded: #021cc4bf;
  --signer-3-color-faded: #a34ed4bf;
  --signer-4-color-faded: #be9202bf;
  --signer-5-color-faded: #8ba700bf;
  --signer-6-color-faded: #0065ffbf;
  --signer-7-color-faded: #e04aa4bf;
  --signer-8-color-faded: #39804cbf;
  --signer-9-color-faded: #02a2bebf;
  --signer-10-color-faded: #e57200bf;

  /* Custom Ripple Color Override Example */
  /* Redefine the variable to change the color of the focus pulse globally */
  /* --verdocs-primary-purple: rgba(0, 101, 255, 1); */
}

/* NOTE: Don't use transform-scale... */
@keyframes verdocs-field-ripple-bloom {
  0% {
    box-shadow: 0 0 0 0 #0065ff;
    opacity: 1;
  }

  100% {
    box-shadow: 0 0 0 20px rgba(101, 77, 203, 0);
    opacity: 0;
  }
}

/* Input Field Overrides (Un-nested for pure CSS compatibility) */
.verdocs-custom-theme verdocs-text-input input,
.verdocs-custom-theme verdocs-text-input .input-element,
.verdocs-custom-theme verdocs-select-input select,
.verdocs-custom-theme verdocs-date-input input,
.verdocs-custom-theme input.date-input {
  border: 1px solid #d1d1d1 !important;
  border-bottom: 1px solid #616161 !important;
  border-radius: 4px !important;
  color: #242424 !important;
}

.verdocs-custom-theme verdocs-button > button.standard {
  background: #2a63f6;
}