:host,
:root {
  /**
   * @prop --font-family: The default font family
   */
  --nylas-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  /**
   * @prop --font-size: The default font size
   */
  --nylas-font-size: 16px;

  /**
   * @prop --nylas-color-primary-50: The lightest color in the color palette
   */
  --nylas-color-primary-50: #f5f7fa;

  /**
   * @prop --nylas-color-primary-100: Slightly darker than --nylas-color-primary-50
   */
  --nylas-color-primary-100: #eaecf5;

  /**
   * @prop --nylas-color-primary-200: Light gray, used for backgrounds and UI elements
   */
  --nylas-color-primary-200: #d5d9eb;

  /**
   * @prop --nylas-color-primary-300: Medium light blue, suitable for less prominent UI elements
   */
  --nylas-color-primary-300: #bdccf9;

  /**
   * @prop --nylas-color-primary-400: Standard blue, good for primary UI elements
   */
  --nylas-color-primary-400: #7b92b5;

  /**
   * @prop --nylas-color-primary-500: Darker blue, ideal for active states or highlights
   */
  --nylas-color-primary-500: #4169e1;

  /**
   * @prop --nylas-color-primary-600: Deep blue, used for emphasis or contrast
   */
  --nylas-color-primary-600: #475c82;

  /**
   * @prop --nylas-color-primary-700: Very dark blue, often used for text or icons
   */
  --nylas-color-primary-700: #314fa9;

  /**
   * @prop --nylas-color-primary-800: Darker variant of --nylas-color-primary-700, for more contrast
   */
  --nylas-color-primary-800: #334159;

  /**
   * @prop --nylas-color-primary-900: The darkest accessible blue, for maximum contrast
   */
  --nylas-color-primary-900: #213571;

  /**
   * @prop --nylas-color-primary-950: Almost black, used sparingly for ultra-high contrast
   */
  --nylas-color-primary-950: #1f2432;

  /**
   * @prop --nylas-color-red-50: Lightest red color
   */
  --nylas-color-red-50: #ffeae8;

  /**
   * @prop --nylas-color-red-100: Extra light red color
   */
  --nylas-color-red-100: #ffc5bf;

  /**
   * @prop --nylas-color-red-300: Lighter red color
   */
  --nylas-color-red-300: #ffa79e;

  /**
   * @prop --nylas-color-red-500: The default red color
   */
  --nylas-color-red-500: #ff786a;

  /**
   * @prop --nylas-color-red-700: Darker red color
   */
  --nylas-color-red-700: #cc4841;

  /**
   * @prop --nylas-color-red-900: Darkest red color
   */
  --nylas-color-red-900: #992222;

  /**
   * @prop --nylas-color-neutral-500: Medium blue, used for primary UI elements
   */
  --nylas-color-neutral-25: #fcfcfd;

  /**
   * @prop --nylas-color-neutral-500: Medium blue, used for primary UI elements
   */
  --nylas-color-neutral-200: #d5d9eb;

  /**
    * @prop --nylas-color-neutral-100: Light grey from Tailwind, temporarily used to match the design system
    */
  --nylas-color-neutral-100: #e5e7eb;

  /**
   * @prop --nylas-color-neutral-300: Muted blue, used for disabled UI elements
   */
  --nylas-color-neutral-300: #b3b8d8;

  /**
   * @prop --nylas-color-neutral-500: Medium blue, used for primary UI elements
   */
  --nylas-color-neutral-500: #4e5ba6;

  /**
   * @prop --nylas-color-neutral-600: Darker blue, used for active states or highlights
   */
  --nylas-color-neutral-600: #3e4784;

  /**
   * @prop --nylas-border-radius: The default border radius for UI elements
   */
  --nylas-border-radius: 0.25rem;

  /**
   * @prop --nylas-border-radius-2x: Double the default border radius for UI elements
   */
  --nylas-border-radius-2x: 0.5rem;

  /**
   * @prop --nylas-border-radius-3x: Triple the default border radius for UI elements
   */
  --nylas-border-radius-3x: 0.75rem;

  /**
   * @prop --nylas-color-white: Absolute white
   */
  --nylas-color-white: #ffffff;

  /**
    * @prop --nylas-color-black: Absolute black
    */
  --nylas-color-black: #000000;

  /**
   * @prop --nylas-base-text: The default text color
   */
  --nylas-base-text: var(--nylas-color-primary-700);

  /**
   * @prop --nylas-color-surface: The default background color for UI elements
   */
  --nylas-color-surface: var(--nylas-color-white);

  /**
   * @prop --nylas-color-surface-subtle: A variant of --nylas-color-surface, for more prominent UI elements
   */
  --nylas-color-surface-subtle: var(--nylas-color-primary-50);

  /**
   * Default color
    */
  color: var(--nylas-base-text);

  a {
    color: var(--nylas-base-text);
  }

  a:hover {
    color: var(--nylas-color-primary-600);
  }

  a:active {
    color: var(--nylas-color-primary-500);
  }

  a:visited {
    color: var(--nylas-color-primary-700);
  }

  button {
    font-size: var(--nylas-font-size);
  }
}

/**
* Customers have to manually add this css to prevent a flash of unstyled content (FOUC)
* when using the nylas-if-state, nylas-provider and any other provider elements.
* This is because the nylas-if-state and nylas-provider slot content is already
* in the DOM before the elements are hydrated. So any javascript that might hide the
* content will not be executed until after the elements are hydrated.
*/
nylas-if-state {
  visibility: hidden;
}

nylas-if-state.hydrated {
  visibility: inherit;
}

nylas-provider {
  visibility: hidden;
}

nylas-provider.hydrated {
  visibility: inherit;
}

nylas-scheduler {
  visibility: hidden;
}

nylas-scheduler.hydrated {
  visibility: inherit;
}

nylas-booking-form.hydrated {
  visibility: inherit;
}

nylas-booking-form {
  height: inherit;
}

nylas-selected-event-card.hydrated {
  visibility: inherit;
}

nylas-selected-event-card {
  height: inherit;
}