/* gds-chat-fab styles */
/* Extracted from @gds/web-components */

:host {
    position: fixed;
    bottom: var(--chat-fab-bottom);
    right: var(--chat-fab-right);
    z-index: 39;
  }

  :host button,
  gds-chat-fab button {
    background-color: var(--chat-fab-background-color);
    border-radius: 50%;
    border: none;
    box-shadow:
      var(--chat-fab-shadow1-box-shadow), var(--chat-fab-shadow2-box-shadow);
    color: var(chat-fab-color);
    cursor: pointer;
    font-size: var(--chat-fab-font-size);
    height: var(--chat-fab-height);
    width: var(--chat-fab-width);
    animation: breathing 5000ms ease-in-out infinite alternate;
  }

  :host button:focus-visible,
  gds-chat-fab button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* Style the gds-icon element within chat-fab */
  :host button gds-icon,
  gds-chat-fab button gds-icon {
    color: var(--chat-fab-icon-color, var(--icon-reverse-color));
    font-size: var(--chat-fab-icon-font-size, 1.5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Target the span icon inside gds-icon (works if shadow DOM allows) */
  :host button gds-icon::part(icon),
  gds-chat-fab button gds-icon::part(icon),
  :host button gds-icon span.geico-icon,
  gds-chat-fab button gds-icon span.geico-icon {
    color: var(--chat-fab-icon-color, var(--icon-reverse-color));
    font-size: var(--chat-fab-icon-font-size, 1.5rem);
    line-height: var(--chat-fab-icon-line-height, 1.5rem);
  }

  @keyframes breathing {
    0% {
      box-shadow:
        0 0 0 8px hsla(211, 100%, 50%, 0.06),
        0 0 0 14x hsla(211, 100%, 50%, 0.1);
    }
    40% {
      box-shadow:
        0 0 0 12px hsla(211, 100%, 50%, 0.06),
        0 0 0 18px hsla(211, 100%, 50%, 0.1);
    }
    70% {
      box-shadow:
        0 0 0 8px hsla(211, 100%, 50%, 0.06),
        0 0 0 14px hsla(211, 100%, 50%, 0.1);
    }
    100% {
      box-shadow:
        0 0 0 4px hsla(211, 100%, 50%, 0.06),
        0 0 0 10px hsla(211, 100%, 50%, 0.1);
    }
  }

/* Icon styles (for icon inside chat-fab) */

:host {
    --icon-size-value-xxsmall: var(--icon-xxsmall-dimensions);
    --icon-size-value-xsmall: var(--icon-xsmall-dimensions);
    --icon-size-value-small: var(--icon-small-dimensions);
    --icon-size-value-medium: var(--icon-medium-dimensions);
    --icon-size-value-large: var(--icon-large-dimensions);
    --icon-size-value-xlarge: var(--icon-xlarge-dimensions);
  }
  :host span.geico-icon:before {
  }
  :host([size="xxsmall"]) span {
    
  }
  :host([size="xsmall"]) span {
    
  }
  :host([size="small"]) span {
    
  }
  :host([size="medium"]) span {
    
  }
  :host([size="large"]) span {
    
  }
  :host([size="xlarge"]) span {
    
  }
    color: var(--icon-default-color);
    color: var(--icon-brand-color);
    color: var(--icon-brand-alt-color);
    color: var(--icon-action-color);
    color: var(--icon-warning-color);
    color: var(--icon-success-color);
    color: var(--icon-danger-color);
    color: var(--icon-yellow-color);
    color: var(--icon-purple-color);
    color: var(--icon-teal-color);
    color: var(--icon-magenta-color);
  /* Scoped span icon styles for gds-chat-fab */
  :host button gds-icon span.geico-icon,
  gds-chat-fab button gds-icon span.geico-icon {
    color: var(--chat-fab-icon-color, var(--icon-reverse-color));
    font-size: var(--chat-fab-icon-font-size, 1.5rem);
    line-height: var(--chat-fab-icon-line-height, 1.5rem);
  }

  span[color="reverse"] {
    color: var(--icon-reverse-color);
  }
    color: var(--icon-always-white);
    color: var(--icon-always-black);
    color: var(--icon-button-default-color);
      color: var(--icon-button-active-color);
      color: var(--icon-button-hover-color);
    color: var(--icon-destructive-default-color);
      color: var(--icon-destructive-active-color);
      color: var(--icon-destructive-hover-color);