/* PluginIcon — BEM. Renders a plugin's icon inside a sized chip with two
   visual variants. Tintable via `--mint-plugin-icon-tone` custom property. */

.mint-plugin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
}

/* Sizes */
.mint-plugin-icon--sm { width: 1.5rem; height: 1.5rem; }
.mint-plugin-icon--md { width: 2rem;   height: 2rem;   }
.mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
.mint-plugin-icon--lg { width: 3rem;   height: 3rem; border-radius: 0.75rem; }

/* Variants — `--mint-plugin-icon-tone` falls back to --color-primary */
.mint-plugin-icon--solid {
  background-color: var(--mint-plugin-icon-tone, var(--color-primary));
  color: white;
}
.mint-plugin-icon--tinted {
  background-color: color-mix(in srgb, var(--mint-plugin-icon-tone, var(--color-primary)) 12%, transparent);
  color: var(--mint-plugin-icon-tone, var(--color-primary));
}

/* Inner svg/img — sized to ~62% of chip */
.mint-plugin-icon--sm .mint-plugin-icon__svg,
.mint-plugin-icon--sm .mint-plugin-icon__img { width: 0.9375rem; height: 0.9375rem; }
.mint-plugin-icon--md .mint-plugin-icon__svg,
.mint-plugin-icon--md .mint-plugin-icon__img { width: 1.125rem;  height: 1.125rem;  }
.mint-plugin-icon--topbar .mint-plugin-icon__svg,
.mint-plugin-icon--topbar .mint-plugin-icon__img { width: 1.25rem; height: 1.25rem; }
.mint-plugin-icon--lg .mint-plugin-icon__svg,
.mint-plugin-icon--lg .mint-plugin-icon__img { width: 1.5rem;    height: 1.5rem;    }

.mint-plugin-icon__img {
  object-fit: contain;
}

.mint-plugin-icon .mint-plugin-icon__svg--structured {
  width: 100%;
  height: 100%;
}