/**
 * The Danger button, as signed off 2026-07-23.
 *
 * The fourth role, and the last one without an implementation. core-buttons.css
 * has carried the note "the agreed hazard tape-tab treatment lands with the
 * component" since TS-5130; this is that component.
 *
 * What it is for: an action that destroys something the user cannot get back.
 * Account deletion, content deletion, cancelling a subscription.
 *
 * Why it is a tape tab and not simply a red button.
 *
 * Colour alone is a poor carrier for "this is dangerous". Roughly one in
 * twelve men has a red-green colour vision deficiency, and to a deuteranope a
 * red button and an orange button are close to indistinguishable, which is
 * exactly the pair this estate uses for destructive and non-destructive. The
 * diagonal hazard stripe on the leading edge is a PATTERN, so it survives any
 * colour deficiency and it survives a greyscale print. Colour and pattern
 * together, not colour alone.
 *
 * Why the fill is white rather than red. A solid red button is louder than a
 * destructive action deserves to be: it draws the eye to the one control you
 * least want pressed by accident. Outlined keeps it legible and findable
 * without inviting the click. The solid red tokens stay in use for confirm
 * dialogs, where the user has already chosen and is being asked to confirm.
 *
 * Contrast: #a61b1b on white measures 7.51:1, which clears 4.5 for the label
 * and 3 for the border with room to spare.
 */

.btn.btn-danger-tape,
a.btn-danger-tape {
  position: relative;
  background: #fff;
  border: 1px solid #a61b1b;
  color: #a61b1b;
  font-weight: 600;
  /* Leading-edge room for the tab. Logical padding so a right-to-left
     language moves the tab to the other side with the text direction. */
  padding-inline-start: 30px;
  overflow: hidden;
}

.btn.btn-danger-tape:hover,
.btn.btn-danger-tape:focus-visible,
a.btn-danger-tape:hover,
a.btn-danger-tape:focus-visible {
  background: #fdecea;
  border-color: #8c1717;
  color: #8c1717;
}

/* The tab. Diagonal hazard stripes, the same visual language as physical
   warning tape, which is why it reads without being explained. */
.btn.btn-danger-tape::before,
a.btn-danger-tape::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 18px;
  background-image: repeating-linear-gradient(
    45deg,
    #f2c200 0,
    #f2c200 5px,
    #2b2b2b 5px,
    #2b2b2b 10px
  );
  /* Decorative only. The label already says what the button does, so this
     must never be the sole carrier of meaning for a screen reader. */
  pointer-events: none;
}

/* Disabled: keep the stripe, drop the invitation. */
.btn.btn-danger-tape:disabled,
.btn.btn-danger-tape.disabled,
a.btn-danger-tape.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Dark mode is not shipped in the app yet. The pair is recorded here so the
   value is not re-derived from scratch when it lands. */
@media (prefers-color-scheme: dark) {
  .ts-dark-ready .btn.btn-danger-tape,
  .ts-dark-ready a.btn-danger-tape {
    background: #351b1b;
    border-color: #ef5350;
    color: #ffb4b4;
  }
}