/*
 * OIC Buttons Styles Pack (P89)
 *
 * "Style 1 (Solid)" + 3 sizes (lg/md/sm)
 * Colors are taken from existing Style Library Button Layers variables.
 */

/* ================================
   Style 1 (Solid) — Base
================================ */
.oic-layers-buttons-style1-lg,
.oic-layers-buttons-style1-md,
.oic-layers-buttons-style1-sm {
  background-color: var(--oic-btn1-bg, transparent);
  color: var(--oic-btn1-text, currentColor);
  border: var(--oic-btn1-border-width, 0px) solid var(--oic-btn1-border, transparent);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--oic-font-family, inherit);
  line-height: 1.2;
}

.oic-layers-buttons-style1-lg:hover,
.oic-layers-buttons-style1-lg:focus,
.oic-layers-buttons-style1-md:hover,
.oic-layers-buttons-style1-md:focus,
.oic-layers-buttons-style1-sm:hover,
.oic-layers-buttons-style1-sm:focus {
  background-color: var(--oic-btn1-bg-hover, var(--oic-btn1-bg, transparent));
  color: var(--oic-btn1-text-hover, var(--oic-btn1-text, currentColor));
  border-color: var(--oic-btn1-border-hover, var(--oic-btn1-border, transparent));
}

/* Lift effect matches your original CSS (lg/md only) */
.oic-layers-buttons-style1-lg:hover,
.oic-layers-buttons-style1-lg:focus,
.oic-layers-buttons-style1-md:hover,
.oic-layers-buttons-style1-md:focus {
  transform: translateY(-2px);
}

/* Sizes */
.oic-layers-buttons-style1-lg { padding: 16px 32px; font-size: 1.4rem; font-weight: 700; }
.oic-layers-buttons-style1-md { padding: 12px 24px; font-size: 1.1rem; font-weight: 600; }
.oic-layers-buttons-style1-sm { padding: 8px 18px; font-size: 0.9rem; font-weight: 500; }

/* ================================
   Token Mapping (Style 1 Layer)
================================ */
.oic-layers-buttons-style1-lg,
.oic-layers-buttons-style1-md,
.oic-layers-buttons-style1-sm {
  --oic-btn1-bg: var(--oic-layer-buttons-style1-bg);
  --oic-btn1-text: var(--oic-layer-buttons-style1-text, currentColor);
  --oic-btn1-border: var(--oic-layer-buttons-style1-border-color, transparent);
  --oic-btn1-bg-hover: var(--oic-layer-buttons-style1-bg-hover, var(--oic-layer-buttons-style1-bg));
  --oic-btn1-text-hover: var(--oic-layer-buttons-style1-text-hover, var(--oic-layer-buttons-style1-text, currentColor));
  --oic-btn1-border-hover: var(--oic-layer-buttons-style1-border-color-hover, var(--oic-layer-buttons-style1-border-color, transparent));
}