button[type] {
  border: 15px solid transparent;
  border-image: var(--button-border) 15 fill stretch;
  block-size: calc(var(--font-size-button) + 30px);
  color: rgb(var(--color-black));
  font-family: var(--font-family-2);
  font-size: var(--font-size-button);
  font-weight: 400;
  inline-size: fit-content;
  line-height: 1;
  padding: 0 5px;
  text-box: trim-both ex alphabetic;
  text-transform: uppercase;
  text-shadow: 2px 2px rgb(var(--color-brown) / 0.3);
  transition: border-image 100ms;

  &:hover {
    border-image-source: var(--button-border-hover);
  }

  &:disabled {
    opacity: 0.5;
  }

  &[data-danger] {
    &:not(:hover) {
      border-image-source: var(--button-border-danger);
      color: rgb(var(--color-red));
    }
  }

  :where(.Bookmark) & {
    --font-size-button: var(--font-size-3);
    border-width: 10px;
    block-size: calc(var(--font-size-button) + 20px);
  }
}