.sakura-gradient-text {
  background: linear-gradient(
    to right,
    var(--sakura-color-primary),
    60%,
    var(--sakura-color-primary)
  );
  background-clip: text;
  color: transparent;
}

.sakura-braced-text {
  position: relative;
  padding-inline: calc(1rem + 6px);
  word-break: break-all;
  hyphens: auto;

  &::before {
    content: '{';
    color: var(--sakura-color-primary);
    font-family: Helvetica, sans-serif;
    position: absolute;
    left: 0;
    top: 0;
  }

  &::after {
    content: '}';
    color: var(--sakura-color-primary);
    font-family: Helvetica, sans-serif;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}