/* ==========================================================
   SHARED ICONS
========================================================== */

.skbt-icon {
  --skbt-icon-box-size: 1em;
  --skbt-icon-size: var(--skbt-icon-box-size);
  --skbt-icon-x: 0px;
  --skbt-icon-y: 0px;

  display: inline-flex;

  width: var(--skbt-icon-box-size);
  height: var(--skbt-icon-box-size);

  flex: 0 0 var(--skbt-icon-box-size);

  align-items: center;
  justify-content: center;

  color: currentColor;

  line-height: 0;
  vertical-align: middle;
}

.skbt-icon__image,
.skbt-icon__svg {
  display: block;

  width: var(--skbt-icon-size);
  height: var(--skbt-icon-size);
  max-width: none;

  flex: 0 0 auto;

  object-fit: contain;

  transform: translate(
    var(--skbt-icon-x),
    var(--skbt-icon-y)
  );
  transform-origin: center;
}

.skbt-icon__svg {
  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}