.ga-breadcrumb {
  @apply flex flex-wrap content-start items-start gap-6;
}

.ga-breadcrumb-item {
  @apply relative inline-flex items-center gap-6;

  /* Explorer button: mouse-only target for sibling navigation menu.
     tabindex="-1" must be set on the element to remove it from tab order.
     Focus ring is handled by the parent __group via :focus-within. */
  .ga-breadcrumb-item__explorer {
    @apply animate-hover cursor-pointer rounded text-lg transition-colors outline-none;

    .ga-icon {
      @apply text-(--ga-color-icon-action);
    }

    &:hover .ga-icon {
      @apply text-(--ga-color-icon-action-hover);
    }
  }

  &.ga-breadcrumb-item--overflow {
    @apply items-center gap-3;

    .ga-breadcrumb-item__menu {
      @apply -left-(--ga-size-spacing-02);
    }

    .ga-breadcrumb-item__trigger {
      @apply animate-hover flex cursor-pointer items-center justify-center gap-2 rounded text-lg font-normal text-(--ga-color-text-action) transition-colors;

      .ga-breadcrumb-item__label {
        @apply max-w-80 truncate text-(--ga-color-text-action);
      }

      .ga-icon {
        @apply text-(--ga-color-icon-action);
      }

      &:hover {
        .ga-breadcrumb-item__label {
          @apply underline;
        }
      }

      &:focus-visible {
        @apply outline-none;

        .ga-breadcrumb-item__label {
          @apply rounded-[2px] no-underline outline-2 outline-offset-2 outline-(--ga-color-border-focus);
        }
      }

      &[aria-expanded='true'] {
        @apply outline-none;

        .ga-breadcrumb-item__label {
          @apply rounded-[2px] no-underline outline-2 outline-offset-2 outline-(--ga-color-border-focus);
        }
      }
    }

    .ga-breadcrumb-item__separator {
      @apply text-lg text-(--ga-color-text-body);
    }
  }

  &.ga-breadcrumb-item--current-page {
    @apply gap-3;

    .ga-breadcrumb-item__trigger {
      @apply pr-1 text-lg font-semibold text-(--ga-color-text-body);

      .ga-breadcrumb-item__label {
        @apply max-w-80 truncate;
      }
    }
  }

  &.ga-breadcrumb-item--back {
    @apply items-center gap-2;

    .ga-breadcrumb-item__trigger {
      @apply animate-hover inline-flex cursor-pointer items-center rounded text-lg transition-colors;

      .ga-icon {
        @apply text-(--ga-color-icon-action);
      }

      &:hover {
        .ga-icon {
          @apply text-(--ga-color-icon-action-hover);
        }
      }

      &:focus-visible {
        @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
      }
    }

    .ga-breadcrumb-item__label {
      @apply text-lg font-semibold text-(--ga-color-text-body);
    }
  }

  &.ga-breadcrumb-item--link {
    @apply gap-3;

    .ga-breadcrumb-item__trigger {
      @apply animate-hover inline-flex cursor-pointer items-center rounded pr-1 text-lg font-normal text-(--ga-color-text-action) transition-colors;

      .ga-breadcrumb-item__label {
        @apply max-w-80 truncate text-(--ga-color-text-action);
      }

      &:hover {
        @apply text-(--ga-color-text-action-hover) underline;

        .ga-breadcrumb-item__label {
          @apply text-(--ga-color-text-action-hover) underline;
        }
      }

      &:active {
        @apply text-(--ga-color-text-action-hover);

        .ga-breadcrumb-item__label {
          @apply text-(--ga-color-text-action-hover);
        }
      }

      &:focus-visible {
        @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
      }
    }

    .ga-breadcrumb-item__explorer {
      @apply pr-1;
    }

    .ga-breadcrumb-item__separator {
      @apply text-lg text-(--ga-color-text-body);
    }
  }

  .ga-breadcrumb-item__group {
    @apply inline-flex items-center rounded;

    &:focus-within {
      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
    }

    .ga-breadcrumb-item__trigger:focus-visible {
      @apply outline-none;
    }
  }
}