:host {
  --button-color: black;
  transition: var(--transition-rule-opacity);
}

.button {
  display: block;
  --button-bg: var(--bg-ms-button-idle);
  --button-fg: black;
  --padding: 2px 8px; 2px;

  color: var(--button-fg);
  padding: var(--padding);
  background: var(--button-bg);

  box-sizing: border-box;
  width: 100%;

  border-width: 2px;
  border-style: solid;
  border-color: var(--border-outset-ms-color);

  font-family: var(--fontfamily-default);
  font-weight: 900;
  font-size: 9px;
  filter: var(--filter-ms-button-border);

  &.thin {
    --padding: 2px 4px 2px;
    border-width: 1px;
  }

  &.destructive {
    --button-bg: red;
    --button-fg: white;
  }

  &:active {
    background: oklch(from var(--button-bg) calc(l - 0.11) c h);
    border-color: var(--border-inset-ms-color);
  }
}