/** Define the variant classes.
*/
hr.puzzle-1 {
    --hr-puzzle-variant: url("assets/img/puzzle-1.png");
}
hr.puzzle-2 {
    --hr-puzzle-variant: url("assets/img/puzzle-2.png");
}
hr.puzzle-3 {
    --hr-puzzle-variant: url("assets/img/puzzle-3.png");
}


/** Define the main hr logic.
*/
hr.puzzle-3,
hr.puzzle-2,
hr.puzzle-1 {
    /** CUSTOMIZATION VARIABLES
     */
    --hr-line-thickness: 3px;
    --hr-line-style: solid;
    --hr-line-color: gray;
     /* The background allows a small gap to be rendered between the HR line
      * and the puzzle piece.
      */
    --hr-puzzle-bg: white;
    --hr-puzzle-size: 3rem;
    --hr-horizontal-margin: 1rem;

    max-height: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    margin: calc(var(--hr-puzzle-size) / 2) var(--hr-horizontal-margin) ;

    border:none;
    border-top-width: var(--hr-line-thickness);
    border-top-style: var(--hr-line-style);
    border-top-color: var(--hr-line-color);
}


/** Define the puzzle rendering logic..
*/
hr.puzzle-3::before,
hr.puzzle-2::before,
hr.puzzle-1::before {
    align-self: center;
    content: " ";
    display: block;
    background-image: var(--hr-puzzle-variant);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: var(--hr-puzzle-bg);
    height: var(--hr-puzzle-size);
    width: var(--hr-puzzle-size);
    overflow: hidden;
}


/** Example on how to customize the puzzle piece.
*/
hr.custom-puzzle {
    --hr-line-thickness: 5px;
    --hr-line-style: dashed;
    --hr-line-color: green;
    --hr-puzzle-size: 5rem;
    --hr-horizontal-margin: 5rem;
}

/** Example on how to customize the puzzle piece.
*/
hr.orange-puzzle {
    --hr-line-thickness: 2px;
    --hr-line-style: solid;
    --hr-line-color: var(--brand-orange);
    --hr-puzzle-size: 3rem;
    --hr-horizontal-margin: 0;
    margin-bottom: 50px;
}