:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html, body {
  font-family: var(--font-family);
  line-height: 1.4;
  min-block-size: unset;
  min-height: unset;
  color: var(--color-text);
  background-color: var(--color-bg);
  accent-color: var(--input-accent-color, var(--color-text));
  overflow: initial;
}

/* Links */
a:not([class]) {
  color: var(--link-color, var(--color-link));
}

:is(a, button, input, textarea, summary, .input) {
  --outline-size: 2px;

  transition: box-shadow 150ms ease, outline-offset 150ms ease, filter 150ms ease;

  &:active {
    filter: brightness(0.75);
  }

  &:focus-within,
  &:focus-visible {
    outline: var(--outline-size) var(--outline-style, solid) var(--outline-color, var(--color-text));
    outline-offset: var(--outline-offset, var(--outline-size));
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

/* Avatars */
.avatar {
  --avatar-border-radius: 2em;

  display: grid;
  place-items: center;
  inline-size: var(--avatar-size, 5ch);
  aspect-ratio: 1;
  margin: 0;
  overflow: clip;
  border-radius: var(--avatar-border-radius);

  & img {
    grid-area: 1/1;
    max-inline-size: 100%;
    block-size: auto;
    border-radius: var(--avatar-border-radius);
    object-fit: cover;
    aspect-ratio: 1;
  }

  &.avatar--icon {
    border: 1px solid var(--color-border--heavy);
    background-color: var(--color-text--reversed);

    & img {
      background-color: transparent;
      border-radius: 0;
      margin: 1ch;
    }
  }
}

.avatar__group {
  --avatar-size: 2.5ch;

  display: grid;
  grid-template-rows: min-content;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  inline-size: 5ch;
  block-size: 5ch;
  place-content: center;

  .avatar {
    margin: auto;
  }

  &:where(:has(> :last-child:nth-child(2))) {
    --avatar-size: 3.5ch;

    > :first-child {
      margin-block-end: 1.5ch;
      margin-inline-end: -0.75ch;
    }

    > :last-child {
      margin-block-start: 1.5ch;
      margin-inline-start: -0.75ch;
    }
  }

  &:where(:has(> :last-child:nth-child(3))) {
    > :last-child {
      margin-inline: 1.25ch -1.25ch;
    }
  }
}

.avatar__form:has(.avatar__delete-btn) {
  --offset: calc(2.65em / 2);

  padding-inline-start: var(--offset);

  .avatar__delete-btn {
    margin-inline-start: calc(var(--offset) * -1);
  }
}

.account-logo {
  --avatar-border-radius: 0.5em;

  border-radius: var(--avatar-border-radius);
}

/* Turbo */
turbo-frame,
turbo-cable-stream-source {
  display: contents;
}

/* For settings */
fieldset {
  display: flex;
  flex-direction: column;
  padding: var(--block-space) 0;
  border: 2px solid var(--fieldset-border-color, var(--color-border));
  max-inline-size: 50ch;
  border-block-end: 0;
  border-inline: 0;

  & legend {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    text-align: center;
  }
}

.membership-item:has(.btn.invisible) {
  opacity: 0.5;
}

/* Flash notices */
.flash {
  position: fixed;
  inset: var(--block-space) 0 auto 0;
  text-align: center;
  display: flex;
  justify-content: center;
  z-index: 99;

  [data-turbo-preview] & { display: none; }
}

.flash__inner {
  animation: appear-then-fade 5s 300ms both;
  background: var(--color-text);
  color: var(--color-text--reversed);
  border-radius: 2em;
  padding: var(--block-space--half) var(--block-space);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

/* Spinners */

.spinner {
  position: relative;

  &::before {
    --mask: no-repeat radial-gradient(#000 68%,#0000 71%);
    --dot-size: 1.25em;

    content: "";
    inline-size: var(--dot-size);
    aspect-ratio: 8/5;
    inset: 50% 0.25em;
    position: absolute;
    margin-inline: calc((var(--dot-size) / 2) * -1);
    margin-block: calc((var(--dot-size) / 3) * -1);
    -webkit-mask: var(--mask), var(--mask), var(--mask);
    -webkit-mask-size: 28% 45%;
    background: currentColor;
    animation: submitting 1.3s infinite linear;
  }
}