hr,
span[role="separator"] {
    --palette-background-bold: currentColor;

    @apply block opacity-40 select-none text-[var(--palette-background-bold)];

    transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &[data-palette] {
        @apply text-[rgb(var(--palette-background-bold))];
    }

    &:not([data-orientation]) {
        @apply my-[var(--spacing-root-medium)] w-full;
    }

    &[data-orientation="vertical"] {
        @apply h-full mx-[var(--spacing-root-medium)];
    }
}

hr {
    @apply border-0 bg-current;

    border-radius: var(--radius-small);

    &:not([data-orientation]) {
        @apply h-px;
    }

    &[data-orientation="vertical"] {
        @apply w-px;
    }
}

span[role="separator"] {
    @apply font-bold inline-flex items-center gap-[var(--spacing-local-small)] justify-center
    text-center tracking-widest whitespace-nowrap;

    font-size: 80%;

    &::before,
    &::after {
        @apply bg-current block flex-grow;

        border-radius: var(--radius-small);

        content: "";
    }

    &:not([data-orientation]) {
        &::before,
        &::after {
            @apply h-px;
        }
    }

    &[data-orientation="vertical"] {
        /**
         * HACK: Might be missing something, but `@apply write-vertical-right` doesn't seem to work?
         */

        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;

        &::before,
        &::after {
            @apply w-px;
        }
    }
}