.Button,
button[type] {
  --block-size: calc(var(--font-size-button) + 30px);
  border: 15px solid transparent;
  border-image: var(--button-border) 15 fill stretch;
  block-size: var(--block-size);
  color: rgb(var(--color-black));
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-button);
  font-weight: 400;
  inline-size: fit-content;
  line-height: 1;
  min-inline-size: var(--min-inline-size, var(--block-size));
  padding: 0 5px;
  /*text-box: trim-both ex alphabetic;*/
  text-align: center;
  text-decoration: none;
  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;
    pointer-events: none;
  }

  &[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);
  }
}

.Button-rss {
  position: relative;

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

  &::after {
    background: url("/images/rss.svg") center / 65% auto no-repeat;
    content: "";
    display: block;
    inset: -15px;
    position: absolute;
    pointer-events: none;
  }
}