:global(.webchat-fluent) .sendbox__toolbar {
  --webchat__sendbox-button-height: 32px;

  display: flex;
  gap: 4px;
  height: var(--webchat__sendbox-button-height);
  margin-inline-start: auto;
}

:global(.webchat-fluent) .sendbox__toolbar-button {
  align-items: center;
  appearance: none;
  aspect-ratio: 1;
  background: transparent;
  border-radius: var(--webchat-borderRadiusSmall);
  border: none;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: var(--webchat__sendbox-button-height);
  justify-content: center;
  padding: 3px;

  --webchat__fluent-icon--size: 20px;

  > :global(.webchat__monochrome-image-masker) {
    font-size: 20px;
    pointer-events: none;
  }

  &.sendbox__toolbar-button--selected {
    color: var(--webchat-colorNeutralForeground2BrandSelected);
  }

  @media (hover: hover) {
    &:not([aria-disabled='true']):hover {
      color: var(--webchat-colorNeutralForeground2BrandHover);
    }
  }

  &:not([aria-disabled='true']):active {
    color: var(--webchat-colorNeutralForeground2BrandPressed);
  }

  &[aria-disabled='true'] {
    color: var(--webchat-colorNeutralForegroundDisabled);
    cursor: not-allowed;
  }

  &.sendbox__toolbar-button--active {
    --webchat__toolbar-button--pulse-start-size: 30px;
    --webchat__toolbar-button--pulse-end-size: 58px;
    --webchat__toolbar-button--pulse-opacity: 0.5;
    --webchat__toolbar-button--background-gradient-opacity: 0.15;
    --webchat__toolbar-button--gradient-color-1: var(--webchat-colorBrandForeground1, #0078d4);
    --webchat__toolbar-button--gradient-color-2: #2db4ff;
    --webchat__toolbar-button--gradient-color-3: #d660ff;
    --webchat__toolbar-button--gradient-color-4: #fea874;

    background-color: var(--webchat-colorNeutralForeground2BrandSelected);
    border-radius: 50%;
    color: var(--webchat-colorNeutralBackground1);

    @media (hover: hover) {
      &:hover {
        color: var(--webchat-colorNeutralBackground1);
      }
    }
  }

  &.sendbox__toolbar-button--with-pulse::before {
    animation: toolbar-button__pulse 1s linear infinite alternate;
    background-color: var(--webchat-colorNeutralForeground2BrandSelected);
    border-radius: 50%;
    content: '';
    height: var(--webchat__toolbar-button--pulse-start-size);
    opacity: var(--webchat__toolbar-button--pulse-opacity);
    position: absolute;
    width: var(--webchat__toolbar-button--pulse-start-size);
  }

  &.sendbox__toolbar-button--with-gradient::after {
    background: linear-gradient(
      90deg,
      var(--webchat__toolbar-button--gradient-color-1) 0%,
      color-mix(in srgb, var(--webchat__toolbar-button--gradient-color-1), var(--webchat__toolbar-button--gradient-color-2)) 33%,
      color-mix(in srgb, var(--webchat__toolbar-button--gradient-color-1), var(--webchat__toolbar-button--gradient-color-3)) 66%,
      color-mix(in srgb, var(--webchat__toolbar-button--gradient-color-1), var(--webchat__toolbar-button--gradient-color-4)) 100%
    );
    border-radius: 50%;
    content: '';
    height: var(--webchat__toolbar-button--pulse-end-size);
    opacity: var(--webchat__toolbar-button--background-gradient-opacity);
    position: absolute;
    width: var(--webchat__toolbar-button--pulse-end-size);
  }
}

:global(.webchat-fluent) .sendbox__toolbar-separator {
  align-self: center;
  border-inline-end: 1px solid var(--webchat-colorNeutralStroke2);
  height: 28px;

  &:first-child,
  &:last-child,
  &:only-child {
    display: none;
  }
}

@keyframes toolbar-button__pulse {
  0% {
    height: var(--webchat__toolbar-button--pulse-start-size);
    width: var(--webchat__toolbar-button--pulse-start-size);
  }

  100% {
    height: var(--webchat__toolbar-button--pulse-end-size);
    width: var(--webchat__toolbar-button--pulse-end-size);
  }
}