.themeshark-divider {
    --transition-duration: .8s;
    --diameter: 0px;
    --height: 10px;
    --width: 100%;
    --border-radius: 0px var(--height) var(--height) 0px;
    --circle-offset: calc((var(--diameter) / -2) + (var(--height) / 2));
    --circle-right: var(--circle-offset);
    --circle-left: auto;
    --text-spacing: 5px;
    --text-far-offset: calc(var(--width) + var(--text-spacing) + (var(--diameter) / 2));
    --text-offset: calc((100% + (var(--diameter) / 2)) - var(--text-far-offset));
    --text-short-offset: 0px;
    --text-padding: var(--text-short-offset) var(--text-short-offset) 0 var(--text-far-offset);
    --border-radius: 0px var(--height) var(--height) 0px; 
    --circle-right: var(--circle-offset); 
    --circle-left: auto; 
    --text-right: auto; 
    --text-left: var(--text-offset); 
    --text-margin: 0px 0px 0px var(--text-spacing); 
    --text-margin-vert: var(--text-spacing) 0px 0px 0px; 
    --border-radius-vert: 0px 0px var(--height) var(--height);
    --hor-transform-origin: left;
    --vert-transform-origin: top;
    --expand-divider-transform-before: scaleX(0);
    --expand-divider-transform-after: scaleX(1);
    --background-color: black;

    height: var(--height);
    position: relative;
    margin:0px;
    transform-origin: left;
}

.themeshark-divider-style--line-circle{
    --text-offset: calc((100% + (var(--diameter) / 2)) - var(--text-far-offset) - var(--height) / 2);
    --text-right: auto; 
    --text-left: var(--text-offset); 
}

.themeshark-divider-inner {
    position:absolute;
    background-color: var(--background-color);
    --translate-x: 0%;
    transform: translateX(var(--translate-x));
    width: var(--width);
    transform-origin: var(--hor-transform-origin);
    height: var(--height);
    margin-top: auto;
    margin-bottom:auto;
}

.themeshark-divider-style--line-circle:not(.themeshark-divider--flip-vertical) .themeshark-divider-inner{
    border-radius: var(--border-radius);
}

.themeshark-divider-style--line-circle .themeshark-divider-circle {
    position: absolute;
    width: var(--diameter);
    height: var(--diameter);
    border-radius: 50%;
    right: var(--circle-right);
    left: var(--circle-left);
    top: calc(50% - var(--diameter) / 2);
    background-color: var(--background-color);
}

.themeshark-divider-text {
    position: absolute;
    transform: translateY(-50%);
    display:block;
    left: var(--text-left);
    right: var(--text-right);
    padding: var(--text-padding);
    top: 50%;
    white-space: nowrap;
    font-size: 20px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left: 5px;
    margin: var(--text-margin);
}


/* --------------------------------------- */
/* VERTICAL STYLES
/* --------------------------------------- */

.themeshark-divider--flip-vertical .themeshark-divider-inner{
    height: var(--width); 
    width: var(--height);
    writing-mode: vertical-lr; 
    --expand-divider-transform-before: scaleY(0); 
    --expand-divider-transform-after: scaleY(1); 
    transform-origin: var(--vert-transform-origin);
}

.themeshark-divider--flip-vertical .themeshark-divider-circle{
    bottom: var(--circle-right); 
    top: var(--circle-left); 
    right:auto; 
    left: calc(50% - var(--diameter) / 2);
}

.themeshark-divider--flip-vertical .themeshark-divider-text{
    margin: var(--text-margin-vert); 
    top: var(--text-left); 
    bottom:var(--text-right); 
    padding: var(--text-padding-vert);
    left:50%; 
    right: auto; 
    transform: translateX(-50%);
}

.themeshark-divider-style--line-circle.themeshark-divider--flip-vertical .themeshark-divider-inner{
    border-radius: var(--border-radius-vert);
}

/* --------------------------------------- */
/* EFFECT EXPAND
/* --------------------------------------- */

@keyframes expandDividerText{
    0% { opacity: 0; }
    65% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes expandDividerCircle{
    0% { transform: scale(0); }
    30% { transform: scale(0); }
    85% { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes expandDividerInner {
    0% { transform: translateX(var(--translate-x)) var(--expand-divider-transform-before); }
    45% { transform: translateX(var(--translate-x)) var(--expand-divider-transform-after); }
    100% { transform: translateX(var(--translate-x)) var(--expand-divider-transform-after); }
}


.themeshark-divider-effect--expand.animated .themeshark-divider-inner{
    animation: expandDividerInner var(--animation-settings);
    transform: translateX(var(--translate-x)) var(--expand-divider-transform-after);
}

.themeshark-divider-effect--expand.animated .themeshark-divider-circle{
    animation: expandDividerCircle var(--animation-settings);
}

.themeshark-divider-effect--expand.animated .themeshark-divider-text{
    animation: expandDividerText var(--animation-settings);
}