/**
 * TODO: A bit lame having to use `:not` selectors due to the `span` selector. Need to
 * update to use `:where`, when support is better.
 */

abbr,
b,
del,
em,
i,
ins,
kbd,
mark,
p,
pre,
s,
samp,
small,
span:not([class], [role]),
strong,
sub,
sup,
u {
    --palette-background-normal: currentColor;

    @apply text-[var(--palette-background-normal)];

    text-align: var(--align-text);
    text-transform: var(--transform-text);

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

    &:not([data-align]) {
        --align-text: inherit;
    }

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

    &:not([data-variation]) {
        @apply leading-[var(--size-text-line-height)];

        font-size: var(--size-text-size);
    }

    &[data-variation~="headline"] {
        @apply leading-[var(--size-headline-line-height)];

        font-size: var(--size-headline-size);
    }

    &:not([data-size]) {
        --size-text-size: inherit;
        --size-text-line-height: inherit;
    }

    &:not([data-transform]) {
        --transform-text: inherit;
    }

    &[data-variation~="truncate"] {
        @apply truncate;
    }
}

kbd {
    --palette-background-normal: var(--palette-neutral-normal);

    --size-text-size: 70% !important;

    @apply border-b-4 border-[rgb(var(--palette-background-normal))] text-extrabold whitespace-nowrap;

    border-style: ridge;

    font-size: var(--size-text-size);
}

pre {
    @apply overflow-x-auto;
}

code,
kbd,
pre {
    --palette-background-lightest: var(--palette-inverse-off-lightest);

    @apply px-[var(--spacing-local-small)] py-[var(--spacing-local-tiny)] rounded-md;

    background: rgba(var(--palette-background-lightest), theme("opacity.20"));

    font-family: var(--font-family-monospace);

    &,
    &[data-palette] {
        @apply text-current;
    }
}

small {
    --size-text-size: 80% !important;

    @apply opacity-75;

    font-size: var(--size-text-size);
}