/* Styling for article-share's dropdown. Injected by PluginStyleHost — there is
   no side-effect CSS import in Component.tsx on purpose (see the header
   comment in apps/web/lib/plugin-style-host.tsx). Every color/size here is a
   CSS custom property with a fallback, so a tenant theme can override any of
   them (or the classes directly) without touching this file. */

.article-share {
  position: relative;
  display: inline-block;
}

.article-share__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--article-share-z-index, 20);
  min-width: var(--article-share-dropdown-width, 220px);
  background: var(--article-share-dropdown-bg, #fff);
  border-top: 4px solid var(--article-share-accent, hsl(20 100% 55%));
  border-radius: var(--article-share-dropdown-radius, 0 0 8px 8px);
  box-shadow: var(
    --article-share-dropdown-shadow,
    0 8px 24px rgba(0, 0, 0, 0.18)
  );
  overflow: hidden;
}

.article-share__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--article-share-text, #1a1a2e);
  text-align: left;
}

.article-share__item:hover {
  background: var(--article-share-item-hover-bg, rgba(0, 0, 0, 0.04));
}

.article-share__icon {
  width: var(--article-share-icon-size, 28px);
  height: var(--article-share-icon-size, 28px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--article-share-icon-radius, 6px);
  background: var(--article-share-icon-bg, #12142b);
  color: var(--article-share-icon-color, #fff);
}

.article-share__icon svg {
  width: 60%;
  height: 60%;
}