@layer modules {
  .microbe {

    a,
    button,
    input[type=submit],
    input[type=reset],
    input[type=button] {

      &.solid,
      &.outline,
      &.ghost {
        cursor: pointer;
        padding: 0 var(--scale-5);
        height: var(--form-element-height);
        user-select: none;
        border-radius: var(--scale-2);
        outline: var(--focus-outline-width) solid transparent;
        transition: border-color 0.25s ease-in-out, background-color 0.25s ease-in-out, color 0.25s ease-in-out, outline-color 0.2s ease-in-out;
        display: flex;
        align-items: center;
        column-gap: var(--scale-4);
        justify-content: center;
        white-space: nowrap;
        outline-offset: var(--focus-outline-offset);
        text-decoration: none;

        & * {
          pointer-events: none;
        }

        &:focus-visible {
          outline-color: hsl(var(--accent-hue) var(--accent-saturation) var(--focus-lightness));
        }

        &[aria-busy=true] {
          color: transparent;

          & * {
            opacity: 0;
          }

          &:hover,
          &:active,
          &:focus-visible {
            color: transparent;
          }

          position: relative;

          &::before {
            content: "";
            position: absolute;
            background-color: var(--mc-text-color);
            mask: url("data:image/svg+xml,%3Csvg fill='none' height='1.4em' width='1.4em' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' /%3E%3C/g%3E%3C/svg%3E");
            height: 1.4em;
            width: 1.4em;
          }
        }

        &.chevron {
          &::after {
            display: inline;
            content: "";
            background: currentColor;
            mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
            height: 1em;
            width: 1em;
            transition: transform 0.2s ease-in-out;
          }

          &:has(+ :popover-open)::after {
            transform: rotate(-180deg);
          }
        }
      }

      &.icon {
        padding: 0;
        aspect-ratio: 1;
      }

      &.solid {
        --mc-text-color: light-dark(hsl(var(--neutral-hue) var(--neutral-saturation) var(--background-lightness)),
            hsl(var(--neutral-hue) var(--neutral-saturation) var(--foreground-lightness)));
        color: var(--mc-text-color);
        background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8));
        border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));

        &:focus,
        &:hover {
          background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
          border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
        }

        &[aria-pressed=true],
        &:active {
          background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
          border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-11));
        }

        &:is(a[aria-disabled=true]):not([href]),
        &:disabled {
          background: hsl(var(--accent-hue) 0% var(--lightness-3));
          border: var(--border-width) solid hsl(var(--accent-hue) 0% var(--lightness-3));
          color: hsl(var(--neutral-hue) 0% var(--lightness-8));
          cursor: default;
        }
      }

      &.outline {
        --mc-text-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
        color: var(--mc-text-color);
        background: transparent;
        border: var(--border-width) solid hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));

        &:hover {
          color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
          background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 10%);
        }

        &[aria-pressed=true],
        &:active {
          color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-11));
          background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 20%);
        }

        &:is(a[aria-disabled=true]):not([href]),
        &:disabled {
          background: hsl(var(--accent-hue) 0% var(--lightness-1));
          border: var(--border-width) solid hsl(var(--accent-hue) 0% var(--lightness-4));
          color: hsl(var(--neutral-hue) 0% var(--lightness-7));
          cursor: default;
        }
      }


      &.ghost {
        --mc-text-color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-9));
        color: var(--mc-text-color);
        background: transparent;
        border: transparent;

        &:hover {
          color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-10));
          background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 10%);
        }

        &[aria-pressed=true],
        &:active {
          color: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-11));
          background: hsl(var(--accent-hue) var(--accent-saturation) var(--lightness-8) / 20%);
        }

        &:is(a[aria-disabled=true]):not([href]),
        &:disabled {
          background: hsl(var(--accent-hue) 0% var(--lightness-1));
          border: none;
          color: hsl(var(--neutral-hue) 0% var(--lightness-7));
          cursor: default;
        }
      }
    }
  }
}