.breadcrumbs {
  @apply py-2;
  & > ul,& > ol {
    & > li {
      & > a {
        &:focus {
          @apply outline-none;
        }
        &:focus-visible {
          outline: 2px solid currentColor;
          outline-offset: 2px;
        }
      }
      & + *:before {
        content: "";
        @apply ml-2 mr-3 block h-1.5 w-1.5 rotate-45 transform opacity-40;
        border-top: 1px solid;
        border-right: 1px solid;
        background-color: transparent;
      }
    }
  }
}

[dir="rtl"] .breadcrumbs > ul > li + *:before,
[dir="rtl"] .breadcrumbs > ol > li + *:before {
  --tw-rotate: -135deg;
}
