/* BXYZ:..:eliot@bosmanxyz.xyz:..:.www.bosmanxyz.xyz — experimental variant */

@layer components {
  @media (min-width: 64rem) {
    .handelsvitrin[data-komponent="handelsvitrin"][data-variant="rammar"] {
      padding: var(--margin);
      border: var(--handels-ring-tjocklek) solid var(--handels-kant);
    }

    .handelsvitrin[data-variant="rammar"]::after {
      content: "";
      position: absolute;
      inset: var(--handels-inre-fyll-inset);
      z-index: 0;
      pointer-events: none;
      background: transparent;
      transition: background-color var(--rorelse-snabb) var(--ease);
    }

    .handelsvitrin[data-variant="rammar"]:is(:hover, :focus-visible)::after {
      background: var(--handels-kant);
    }

    .handelsvitrin[data-variant="rammar"]:is(:hover, :focus-visible) .handelsvitrin__etikett {
      color: var(--text-pa-accent);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ram {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring {
      position: absolute;
      box-sizing: border-box;
      border: var(--handels-ring-tjocklek) solid var(--handels-kant);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="1"] {
      inset: var(--handels-ring-luft);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="2"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 1);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="3"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 2);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="4"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 3);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="5"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 4);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="6"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 5);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="7"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 6);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="8"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 7);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="9"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 8);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="10"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 9);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="11"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 10);
    }

    .handelsvitrin[data-variant="rammar"] .handelsvitrin__ring[data-inre="12"] {
      inset: calc(var(--handels-ring-luft) + var(--handels-ring-steg) * 11);
    }
  }
}