/* Glampfire controls: Campfire's buttons, inputs and switches, restyled through their
   own variables. Loads after buttons.css and inputs.css. */
:root {
  --btn-size: 40px;
  --hover-size: 0;
  --input-border-radius: 12px;
}

/* Inline SVG icons default to 20px; components size them more specifically. */
.icon { block-size: 20px; flex: none; inline-size: 20px; }

/* Buttons: pills; icon-only buttons are white circles */
.btn {
  --btn-background: var(--gf-surface);
  --btn-border-color: var(--gf-border);
  --btn-padding: 0 18px;

  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.05);
  font-size: 14px;
  font-weight: 600;
  min-block-size: var(--btn-size);

  &:hover { --btn-background: var(--gf-hover); }

  &:where(:has(.for-screen-reader):has(img, figure)) { --btn-padding: 0; }

  &:focus-visible { outline: 2px solid var(--gf-mention); outline-offset: 2px; }
}

.btn--reversed {
  --btn-background: var(--gf-primary);
  --btn-border-color: transparent;
  --btn-color: var(--gf-on-primary);

  &:hover { --btn-background: color-mix(in oklch, var(--gf-primary) 86%, var(--gf-surface)); }
}

.btn--negative {
  --btn-background: var(--gf-negative);
  --btn-border-color: transparent;
  --btn-color: white;

  &:hover { --btn-background: color-mix(in oklch, var(--gf-negative) 88%, black); }
}

/* Avatar buttons keep Campfire's zero padding (otherwise the image is squeezed away). */
.btn:where(.avatar) {
  --btn-padding: 0;

  box-shadow: none;
  min-block-size: 0;
}

/* Text inputs */
.input {
  --input-background: var(--gf-surface);
  --input-border-color: var(--gf-border-strong);
  --input-padding: 10px 14px;

  font-size: 15px;
}

:where(input, select).input:not(textarea) { min-block-size: 44px; }

/* Inputs show a soft ring instead of Campfire's outline */
.input:focus-visible,
.input--actor .input:focus-visible { outline: none; }

.input:where(:not(:active)):focus,
.input--actor:focus-within {
  --input-border-color: var(--gf-ink-faint);

  box-shadow: 0 0 0 3px oklch(var(--lch-black) / 0.07);
  filter: none;
}

.input--actor {
  align-items: center;

  .input { --input-background: transparent; --input-border-size: 0; min-block-size: 0; box-shadow: none; }
  img { opacity: 0.45; }
}

/* Switches: iOS-like */
.switch {
  block-size: 26px;
  inline-size: 44px;
}

.switch__btn {
  background-color: var(--gf-border-strong);

  &::before {
    background-color: white;
    block-size: 20px;
    box-shadow: 0 1px 3px oklch(0% 0 0 / 0.2);
    inline-size: 20px;
    inset-block-end: 3px;
    inset-inline-start: 3px;
  }

  .switch__input:checked + & {
    background-color: var(--gf-ink);

    &::before { transform: translateX(18px); }
  }
}

/* Campfire's soft groups become rounded tinted panels */
html .fill-shade { background-color: var(--gf-hover); }
html .border-radius { border-radius: 16px; }

hr.separator { border-color: var(--gf-border); }

/* Your own admin role can't be changed here; the label already says it. */
.role-toggle:has(input:disabled) { display: none; }