//
// Copyright IBM Corp. 2023, 2024
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '../../config' as *;
@use '../../colors' as *;
@use '../../motion' as *;
@use '../../spacing' as *;
@use '../../theme' as *;
@use '../../type' as *;
@use '../../utilities/ai-gradient' as *;
@use '../../utilities/convert';
@use '../toggletip';
@use '../popover';

$sizes: (
  mini: (
    height: convert.to-rem(16px),
    width: convert.to-rem(16px),
    font-size: convert.to-rem(9px),
    line-height: convert.to-rem(12px),
  ),
  2xs: (
    height: convert.to-rem(20px),
    width: convert.to-rem(20px),
    font-size: convert.to-rem(12px),
    line-height: convert.to-rem(16px),
  ),
  xs: (
    height: convert.to-rem(24px),
    width: convert.to-rem(24px),
    font-size: convert.to-rem(12px),
    line-height: convert.to-rem(16px),
  ),
  sm: (
    height: convert.to-rem(32px),
    width: convert.to-rem(32px),
    font-size: convert.to-rem(16px),
    line-height: convert.to-rem(21px),
  ),
  md: (
    height: convert.to-rem(40px),
    width: convert.to-rem(40px),
    font-size: convert.to-rem(16px),
    line-height: convert.to-rem(21px),
  ),
  lg: (
    height: convert.to-rem(48px),
    width: convert.to-rem(48px),
    font-size: convert.to-rem(16px),
    line-height: convert.to-rem(21px),
  ),
  xl: (
    height: convert.to-rem(64px),
    width: convert.to-rem(64px),
    font-size: convert.to-rem(20px),
    line-height: convert.to-rem(26px),
  ),
);

/// Slug styles
/// @access public
/// @group AI
@mixin slug {
  .#{$prefix}--ai-label,
  .#{$prefix}--slug {
    display: flex;
  }

  .#{$prefix}--ai-label:has(> .#{$prefix}--popover--open),
  .#{$prefix}--slug:has(> .#{$prefix}--popover--open) {
    z-index: 2;
  }

  .#{$prefix}--ai-label__button,
  .#{$prefix}--slug__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid $border-inverse;
    background: transparent;
    color: $text-primary;
    font-weight: 600;
    outline: none;
    transition:
      color $duration-fast-01 motion(entrance, productive),
      border-color $duration-fast-01 motion(entrance, productive),
      box-shadow $duration-fast-01 motion(entrance, productive),
      background $duration-fast-01 motion(entrance, productive);

    @each $group, $size in $sizes {
      // Create a class for each size ai label
      &--#{$group} {
        @each $property, $value in $size {
          // Set correct properties for each size
          #{$property}: $value;
        }
      }
    }
  }

  // Add 24px click target for mini, 2xs sizes
  .#{$prefix}--ai-label__button--mini::after,
  .#{$prefix}--ai-label__button--2xs::after,
  .#{$prefix}--slug__button--mini::after,
  .#{$prefix}--slug__button--2xs::after {
    position: absolute;
    display: block;
    block-size: 24px;
    content: '';
    inline-size: 24px;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:focus,
  .#{$prefix}--slug .#{$prefix}--slug__button:focus {
    border: 1px solid $focus;
    box-shadow: inset 0 0 0 1px $focus;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover,
  .#{$prefix}--slug .#{$prefix}--slug__button:hover {
    background: $border-inverse;
    color: $text-inverse;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover:active,
  .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
    background: $border-inverse;
    box-shadow:
      inset 0 0 0 1px $focus,
      inset 0 0 0 2px $focus-inset;
    color: $text-inverse;
  }

  .#{$prefix}--ai-label
    .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--mini:hover:active,
  .#{$prefix}--ai-label
    .#{$prefix}--ai-label__button.#{$prefix}--ai-label__button--2xs:hover:active,
  .#{$prefix}--slug
    .#{$prefix}--slug__button.#{$prefix}--slug__button--mini:hover:active,
  .#{$prefix}--slug
    .#{$prefix}--slug__button.#{$prefix}--slug__button--2xs:hover:active {
    box-shadow: inset 0 0 0 1px $focus-inset;
  }

  .#{$prefix}--ai-label__text,
  .#{$prefix}--slug__text {
    position: relative;
  }

  // Inline slug
  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline {
    border: 1px solid transparent;
    border-radius: convert.to-rem(1px);
    background: transparent;
    block-size: initial;
    color: $text-primary;
    font-size: convert.to-rem(14px);
    inline-size: initial;
    line-height: initial;
    padding-inline: convert.to-rem(4px);
  }

  .#{$prefix}--ai-label__button--inline::before,
  .#{$prefix}--slug__button--inline::before {
    display: none;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:focus,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus {
    border-color: $focus;
    box-shadow: none;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover,
  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:hover:active,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline:hover:active {
    border-color: $icon-secondary;
    background: transparent;
    box-shadow: none;
    color: $text-secondary;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline:focus:hover,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline:focus:hover {
    border-color: $focus;
  }

  .#{$prefix}--ai-label
    .#{$prefix}--ai-label__button--inline:hover
    .#{$prefix}--ai-label__text::before,
  .#{$prefix}--slug
    .#{$prefix}--slug__button--inline:hover
    .#{$prefix}--slug__text::before {
    background: $icon-secondary;
  }

  .#{$prefix}--ai-label__button--inline .#{$prefix}--ai-label__text,
  .#{$prefix}--slug__button--inline .#{$prefix}--slug__text {
    padding-inline-start: convert.to-rem(8px);
  }

  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--lg
    .#{$prefix}--ai-label__text,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xl
    .#{$prefix}--ai-label__text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg
    .#{$prefix}--slug__text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl
    .#{$prefix}--slug__text {
    padding-inline-start: convert.to-rem(12px);
  }

  .#{$prefix}--ai-label__button--inline .#{$prefix}--ai-label__text::before,
  .#{$prefix}--slug__button--inline .#{$prefix}--slug__text::before {
    position: absolute;
    display: inline-block;
    background: $icon-primary;
    block-size: convert.to-rem(4px);
    content: '';
    inline-size: convert.to-rem(4px);
    inset-block-start: 50%;
    inset-inline-start: 0;
    opacity: 1;
    transform: translateY(-50%);
    transition:
      background $duration-fast-01 motion(entrance, productive),
      box-shadow $duration-fast-01 motion(entrance, productive);
  }

  .#{$prefix}--ai-label__button--lg .#{$prefix}--ai-label__text::before,
  .#{$prefix}--ai-label__button--xl .#{$prefix}--ai-label__text::before,
  .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before,
  .#{$prefix}--slug__button--xl .#{$prefix}--slug__text::before {
    block-size: convert.to-rem(8px);
    inline-size: convert.to-rem(8px);
  }

  // Only allow sm, md, and lg sizes
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--mini,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--mini
    .#{$prefix}--ai-label__additional-text,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--2xs,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--2xs
    .#{$prefix}--ai-label__additional-text,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xs,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xs
    .#{$prefix}--ai-label__additional-text,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--sm,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--sm
    .#{$prefix}--ai-label__additional-text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--mini
    .#{$prefix}--slug__additional-text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--2xs
    .#{$prefix}--slug__additional-text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xs
    .#{$prefix}--slug__additional-text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--sm
    .#{$prefix}--slug__additional-text {
    font-size: convert.to-rem(12px);
  }

  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--lg,
  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--xl,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--lg,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--xl {
    font-size: convert.to-rem(16px);
  }

  // Inline slug with text
  .#{$prefix}--ai-label .#{$prefix}--ai-label__button--inline-with-content,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content {
    border: 1px solid $border-inverse;
    padding-block: convert.to-rem(2px);
    padding-inline: convert.to-rem(8px);
  }

  .#{$prefix}--ai-label__button--inline-with-content
    .#{$prefix}--ai-label__additional-text,
  .#{$prefix}--slug__button--inline-with-content
    .#{$prefix}--slug__additional-text {
    @include type-style('body-compact-02');

    padding-inline-start: convert.to-rem(4px);
  }

  .#{$prefix}--ai-label__button--inline.#{$prefix}--ai-label__button--md
    .#{$prefix}--ai-label__additional-text,
  .#{$prefix}--slug__button--inline.#{$prefix}--slug__button--md
    .#{$prefix}--slug__additional-text {
    font-size: convert.to-rem(14px);
  }

  .#{$prefix}--ai-label
    .#{$prefix}--ai-label__button--inline-with-content:focus,
  .#{$prefix}--ai-label
    .#{$prefix}--ai-label__button--inline-with-content:hover:focus,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:focus,
  .#{$prefix}--slug .#{$prefix}--slug__button--inline-with-content:hover:focus {
    box-shadow: inset 0 0 0 1px $focus;
  }

  // Slug callout styles
  .#{$prefix}--ai-label .#{$prefix}--ai-label-content,
  .#{$prefix}--slug .#{$prefix}--slug-content {
    @include ai-popover-gradient();

    border: 1px solid transparent;
    border-radius: convert.to-rem(8px);
    // Need to make tokens
    box-shadow:
      inset 0 -80px 70px -65px $ai-inner-shadow,
      -40px 44px 60px -24px $ai-popover-shadow-outer-01,
      -56px 64px 64px -24px $ai-popover-shadow-outer-02;
    color: $text-primary;
    min-inline-size: convert.to-rem(280px);
  }

  // Slug callout caret styles
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    background: transparent;
    clip-path: none;
  }

  // Caret pseudo element base styles
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret::before,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret::before,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret::before,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret::before {
    position: absolute;
    display: block;
    border: 1px solid $ai-border-start;
    background: $background;
    block-size: convert.to-rem(12px);
    clip-path: polygon(98% 0, 0 0, -52% 150%) border-box;
    content: '';
    inline-size: convert.to-rem(12px);
    transform: rotate(45deg);
  }

  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret::after,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret::after,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret::after,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end,
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret::after {
    position: absolute;
    display: block;
    background: $background;
    block-size: convert.to-rem(14px);
    content: '';
    inline-size: convert.to-rem(2px);
  }

  // Top
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      inset-block-end: convert.to-rem(1px);
      transform: rotate(-135deg);
    }

    &::after {
      background: $ai-popover-caret-bottom-background;
      block-size: convert.to-rem(2px);
      border-end-end-radius: 50%;
      border-end-start-radius: 50%;
      inline-size: convert.to-rem(14px);
      inset-block-start: convert.to-rem(-2px);
      inset-inline-start: convert.to-rem(-1px);
    }
  }

  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--ai-label-content--with-actions
    + .#{$prefix}--popover-caret::after,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--slug-content--with-actions
    + .#{$prefix}--popover-caret::after {
    display: none;
  }

  // Right
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--right,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--right-top,
      .#{$prefix}--popover--right-start,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      inset-inline-start: convert.to-rem(1px);
      transform: rotate(-45deg);
    }

    &::after {
      border-end-start-radius: 50%;
      border-start-start-radius: 50%;
      inset-block-start: convert.to-rem(-1px);
      inset-inline-start: convert.to-rem(6px);
    }
  }

  // Bottom
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--bottom,
      .#{$prefix}--popover--bottom-left,
      .#{$prefix}--popover--bottom-right,
      .#{$prefix}--popover--bottom-start,
      .#{$prefix}--popover--bottom-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      inset-block-start: convert.to-rem(1px);
      transform: rotate(45deg);
    }

    &::after {
      block-size: convert.to-rem(2px);
      border-start-end-radius: 50%;
      border-start-start-radius: 50%;
      inline-size: convert.to-rem(14px);
      inset-block-end: convert.to-rem(-2.5px);
      inset-inline-start: convert.to-rem(-1px);
    }
  }

  // Left
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--left-top,
      .#{$prefix}--popover--left-start,
      .#{$prefix}--popover--left-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      inset-inline-end: convert.to-rem(1px);
      transform: rotate(135deg);
    }

    &::after {
      border-end-end-radius: 50%;
      border-start-end-radius: 50%;
      inset-block-start: convert.to-rem(-1px);
      inset-inline-start: convert.to-rem(-2px);
    }
  }

  // Override for specific alignments
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret::after,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret::after,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret::after,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret::after {
    background: transparent;
  }

  // Change caret color / border when it is near the bottom of the callout
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      border-color: $ai-popover-caret-bottom;
      background: $ai-popover-caret-bottom-background;
    }
  }

  // Adjust background if actions are present
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover:has(.#{$prefix}--ai-label-content--with-actions)
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--top-end
    )
    > .#{$prefix}--popover:has(.#{$prefix}--ai-label-content--with-actions)
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-end,
      .#{$prefix}--popover--top-start
    )
    > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left-bottom,
      .#{$prefix}--popover--right-bottom,
      .#{$prefix}--popover--left-end,
      .#{$prefix}--popover--right-end,
      .#{$prefix}--popover--top,
      .#{$prefix}--popover--top-right,
      .#{$prefix}--popover--top-left,
      .#{$prefix}--popover--top-start,
      .#{$prefix}--popover--top-end
    )
    > .#{$prefix}--popover:has(.#{$prefix}--slug-content--with-actions)
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      background: $ai-popover-caret-bottom-background-actions;
    }
  }

  // Change the caret border when it is near the middle of the callout
  .#{$prefix}--ai-label
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--right
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--ai-label
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--right
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret,
  .#{$prefix}--slug
    > .#{$prefix}--toggletip:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--right
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-caret,
    // autoAlign uses a different dom structure where the caret is within the content instead of a sibling
    .#{$prefix}--slug
    > .#{$prefix}--toggletip.#{$prefix}--popover--auto-align:is(
      .#{$prefix}--popover--left,
      .#{$prefix}--popover--right
    )
    > .#{$prefix}--popover
    > .#{$prefix}--popover-content
    > .#{$prefix}--popover-caret {
    &::before {
      border-color: $ai-popover-caret-center;
    }
  }

  .#{$prefix}--ai-label .#{$prefix}--toggletip-content,
  .#{$prefix}--slug .#{$prefix}--toggletip-content {
    // This sets the max size to the size of the action bar with 3 buttons
    padding-block: convert.to-rem(24px) convert.to-rem(80px);
    padding-inline: convert.to-rem(24px);
  }

  .#{$prefix}--ai-label
    .#{$prefix}--ai-label-content
    .#{$prefix}--toggletip-content,
  .#{$prefix}--slug .#{$prefix}--slug-content .#{$prefix}--toggletip-content {
    max-inline-size: convert.to-rem(320px);
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label-actions,
  .#{$prefix}--slug .#{$prefix}--slug-actions {
    position: absolute;
    justify-content: flex-end;
    backdrop-filter: blur(85px);
    background: rgba(0, 0, 0, 0.01);
    border-end-end-radius: convert.to-rem(8px);
    border-end-start-radius: convert.to-rem(8px);
    column-gap: 0;
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label-actions .#{$prefix}--btn:focus,
  .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus {
    border-color: $focus;
    box-shadow:
      inset 0 0 0 1px $focus,
      inset 0 0 0 2px $background;
  }

  .#{$prefix}--ai-label .#{$prefix}--ai-label-actions .#{$prefix}--btn--primary,
  .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn--primary {
    order: 1;
    border-end-end-radius: convert.to-rem(7px);
  }

  // Revert styles
  .#{$prefix}--ai-label.#{$prefix}--ai-label--revert,
  .#{$prefix}--slug.#{$prefix}--slug--revert {
    transform: translate($spacing-03, -50%);
  }

  .#{$prefix}--ai-label--revert .#{$prefix}--btn--icon-only,
  .#{$prefix}--slug--revert .#{$prefix}--btn--icon-only {
    align-items: center;
    padding-block-start: 0;
  }

  .#{$prefix}--ai-label--revert .#{$prefix}--btn--icon-only svg,
  .#{$prefix}--slug--revert .#{$prefix}--btn--icon-only svg {
    margin: 0;
  }
}