/* || Branding */

/*
README:

- Wrap an item to get the correct branding e.g.
    <div class="iconWrapper">
        <div class="icon"></div>
    </div>

-Change the alpha on the relevant wrapper to make the background transparent

 */


/* -- Icon */

.iconWrapper {
    /* Inputs */
    --iconWidth: 80vh;
    --color: rgba(255, 255, 255, 1);
    --background: rgba(255,164,0,0); /* Set alpha to 0 for transparent background */

    /* Calculated values */
    box-sizing: content-box; /* To remove the box-sizing: border-box; which will likely be applied to the root */
    background: var(--background);
    --diameterExt: calc(var(--iconWidth) * 0.32954 * 2);
    width: var(--iconWidth);
    height: calc(var(--iconWidth) * 0.86537);
    position: relative;
    padding: calc(var(--iconWidth) * 0.055728);
}

/* Static icon */
.icon,
.icon::before {
    position: absolute;
    height: var(--diameterExt);
    width: var(--diameterExt);
    border-radius: 50%;
    box-shadow: 0px 0px 0px calc(var(--iconWidth) * 0.027257) var(--color) inset; 
    /* Box shadow used to make the entire border internal to the circle */
}

.icon::before {
    content: '';
    transform: translateX(calc(0.34389 * var(--iconWidth))) translateY(calc(0.20628 * var(--iconWidth)));
}

/* Animated icon */
.iconAnimate,
.iconAnimate::after {    
    position: absolute;
    height: var(--diameterExt);
    width: var(--diameterExt);
    border-radius: 50%;
    box-shadow: 0px 0px 0px calc(var(--iconWidth) * 0.027257) var(--color) inset; 
    /* Box shadow used to make the entire border internal to the circle */
}

.iconAnimate::after {
    content: '';
    box-shadow: 0px 0px 0px calc(var(--iconWidth) * 0.027257) rgba(0,0,0,0) inset;
    transition: 500ms cubic-bezier(0.7, 0.04, 0.33, 1.31);
}

.iconAnimate:hover::after {
    transform: translateX(calc(0.34389 * var(--iconWidth))) translateY(calc(0.20628 * var(--iconWidth)));
    box-shadow: 0px 0px 0px calc(var(--iconWidth) * 0.027257) var(--color) inset; 
}



/* -- Whimsy */

.whimsyWrapper {
    /* Inputs */
    --whimsyHeight: 10px;
    --color: rgba(255, 255, 255, 1);
    --background: rgba(255,164,0,0); /* Set alpha to 0 for transparent background */
    
    /* Calculated values */
    box-sizing: content-box; /* To remove the box-sizing: border-box; which will likely be applied to the root */
    background: var(--background);
    width: calc(var(--whimsyHeight) * 0.80902);
    height: var(--whimsyHeight);
    position: relative;    
    overflow: hidden;
    border: solid calc(var(--whimsyHeight) * 0.055728 * 2) var(--background); /* Used instead of padding so that overflow works */
}

/* Static whimsy */
.whimsy,
.whimsy::before,
.whimsy::after {
    position: absolute;
    background-color: var(--color);
}

.whimsy {
    height: var(--whimsyHeight);
    width: calc(var(--whimsyHeight) * 0.045085);
    transform: translateX(calc(-50% + (var(--whimsyHeight) * 0.80902 / 2)));
}

.whimsy::before {
    content: '';
    height: calc(var(--whimsyHeight) * 0.045085);
    width: calc(var(--whimsyHeight) * 0.80902);
    transform: translateY(calc(-50% + (var(--whimsyHeight) * 0.39308))) translateX(-50%);
}

.whimsy::after {
    content: '';
    width: calc(var(--whimsyHeight) * 00.44600);
    height: calc(var(--whimsyHeight) * 0.44600);
    background: rgba(0,0,0,0);
    border-bottom: solid calc(var(--whimsyHeight) * 0.045085) var(--color);
    border-left: solid calc(var(--whimsyHeight) * 0.045085) var(--color);
    transform-origin: bottom left;
    transform: translateX(calc(var(--whimsyHeight) * (0.045085 / 2))) translateY(calc(var(--whimsyHeight) * (0.39308 - 0.44600))) rotate(-45deg) skew(-14.098deg, -14.098deg);
}

/* Animated whimsy */
.whimsyAnimate,
.whimsyAnimate::before,
.whimsyAnimate::after {
    position: absolute;
    background-color: var(--color);
}

.whimsyAnimate {
    height: var(--whimsyHeight);
    width: calc(var(--whimsyHeight) * 0.045085);
    transform: translateX(calc(-50% + (var(--whimsyHeight) * 0.80902 / 2)));
}

.whimsyAnimate::before {
    content: '';
    height: calc(var(--whimsyHeight) * 0.045085);
    width: calc(var(--whimsyHeight) * 0.80902);
    transform: translateY(calc(-50% + (var(--whimsyHeight) * 0.39308))) translateX(-50%);
    transition: 500ms cubic-bezier(0.7, 0.04, 0.33, 1.31);
    background-color: var(--color);
    opacity: 0;
}

.whimsyAnimate::after {
    content: '';
    width: calc(var(--whimsyHeight) * 00.44600);
    height: calc(var(--whimsyHeight) * 0.44600);
    background: rgba(0,0,0,0);
    border-bottom: solid calc(var(--whimsyHeight) * 0.045085) rgba(0,0,0,0);
    border-left: solid calc(var(--whimsyHeight) * 0.045085) rgba(0,0,0,0);
    transform-origin: bottom left;
    transform: translateX(calc(var(--whimsyHeight) * (0.045085 / 2))) translateY(calc(var(--whimsyHeight) * (0.39308 - 0.44600))) rotate(-45deg) skew(-14.098deg, -14.098deg);
    transition: 500ms cubic-bezier(0.7, 0.04, 0.33, 1.31);
}

.whimsyAnimate:hover::before {
    opacity: 1;
}

.whimsyAnimate:hover::after {
    border-bottom: solid calc(var(--whimsyHeight) * 0.045085) var(--color);
    border-left: solid calc(var(--whimsyHeight) * 0.045085) var(--color);
}