@define-mixin decorator-bb {
  padding: var(--bb-spacing, 0);
  border: var(--bb-border, var(--size-1) solid var(--color-primary));
  border-top-left-radius: var(--bb-radius-tl, var(--size-1));
  border-top-right-radius: var(--bb-radius-tr, 0);
  border-bottom-right-radius: var(--bb-radius-br, 0);
  border-bottom-left-radius: var(--bb-radius-bl, 0);

  color: var(--bb-fg, var(--color-text-primary));

  background-color: var(--bb-bg, var(--color-primary));

  corner-shape: var(--bb-shapes, bevel);
}

@define-mixin decorator-torn {
    position: relative;
    transform: rotate(1.5deg);

    display: block;

    padding: 0.4em 0.8em;
    border-radius: 0.3em 0.6em 0.4em 0.5em / 0.5em 0.4em 0.6em 0.3em;

    color: var(--torn-fg);

    background: var(--torn-bg);
    clip-path: polygon(
        8px 0%,
        12px 8%,
        6px 18%,
        14px 32%,
        4px 45%,
        12px 58%,
        7px 72%,
        15px 85%,
        8px 100%,
        calc(100% - 8px) 100%,
        calc(100% - 15px) 85%,
        calc(100% - 7px) 72%,
        calc(100% - 12px) 58%,
        calc(100% - 4px) 45%,
        calc(100% - 14px) 32%,
        calc(100% - 6px) 18%,
        calc(100% - 12px) 8%,
        calc(100% - 8px) 0%
    );
    box-shadow: 2px 2px 4px rgb(0 0 0 / 30%);
}