.btn{
  font-family:inherit; font-size:.9rem; padding:7px 16px; border-radius:8px; cursor:pointer;
  border: 1px solid var(--c-border); background: color-mix(in srgb, var(--c-text) 3%, transparent); color:var(--c-text);
  text-decoration:none; display:inline-flex; align-items:center; gap:.45rem;
  transition: background .25s, border-color .25s, color .25s, filter .25s;
}
a.btn:link, a.btn:visited, a.btn:hover, a.btn:active{color:var(--c-text); text-decoration:none;}

.updateForm .btn{justify-self:start; width:auto;}
.updateForm .btn.icon{
  justify-self:center; align-self:center; width:150px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}

.btn.primary{background:var(--c-primary); color:#fff;}
.btn.success{background:var(--c-success); color:#fff;}
.btn.danger{background:var(--c-danger); color:#fff;}
.btn.warn{background:var(--c-warn); color:#fff;}
.btn:hover{filter:brightness(1.06); background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.btn.primary:hover,.btn.success:hover,.btn.danger:hover{filter:brightness(1.08);}
.btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--c-primary) 60%, transparent);
  outline-offset:2px;
}
.btn[disabled], .btn.disabled{opacity:.55; cursor:not-allowed; filter:none;}
.btn.ghost{background:transparent; color:var(--c-text); border:1px solid var(--c-border);}
.btn.ghost:hover{background: color-mix(in srgb, var(--c-text) 6%, transparent);}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.outline:hover, :root:not([data-theme="light"]) .btn.ghost:hover{background: color-mix(in srgb, var(--c-text) 14%, transparent);}
}
:root[data-theme="dark"] .btn.outline:hover,
:root[data-theme="dark"] .btn.ghost:hover{background: color-mix(in srgb, var(--c-text) 14%, transparent);}

.btn.pill{border-radius:999px; padding:6px 14px; border:1px solid var(--c-border); background:var(--c-body-bg);}
.btn.pill:hover{background: color-mix(in srgb, var(--c-text) 6%, transparent);}
.btn.pill.active{
  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-body-bg));
  border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
  font-weight:600; pointer-events:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.pill{background:var(--c-body-bg);}
  :root:not([data-theme="light"]) .btn.pill.active{background: color-mix(in srgb, var(--c-primary) 18%, transparent);}
}
:root[data-theme="dark"] .btn.pill{background:var(--c-body-bg);}
:root[data-theme="dark"] .btn.pill.active{background: color-mix(in srgb, var(--c-primary) 18%, transparent);}

.btn.icon{width:150px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; line-height:1;}

.btn.soft{
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-body-bg));
  border:1px solid color-mix(in srgb, var(--c-primary) 45%, var(--c-border));
  color:var(--c-text);
}
.btn.soft:hover{filter:none; background: color-mix(in srgb, var(--c-primary) 16%, var(--c-body-bg));}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn.soft{
    background: color-mix(in srgb, var(--c-primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
  }
  :root:not([data-theme="light"]) .btn.soft:hover{background: color-mix(in srgb, var(--c-primary) 24%, transparent);}
}
:root[data-theme="dark"] .btn.soft{
  background: color-mix(in srgb, var(--c-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border));
}
:root[data-theme="dark"] .btn.soft:hover{background: color-mix(in srgb, var(--c-primary) 24%, transparent);}