/* ==========================================================================
   SVG Separator start style
   ========================================================================== */

.qodef-svg-separator-holder {
	position:relative;
	cursor:default;
	@include qodefBoxSizing(border-box);

	.qodef-svg-separator {
		position: relative;
		opacity: 0;
		@include qodefTransition(all .3s ease-out 0s);

		svg {
			stroke: $first-main-color;
			vertical-align: middle;
			height: 20px;
			width: 60px;
			@include qodefTransition(stroke .3s ease-out 0s);
		}

		path {
			fill: none;
			stroke: inherit;
			stroke-width: 6;
			stroke-miterlimit: 10;
		}

		&.qodef-svg-separator-on {
			opacity: 1;
		}

	}

    &.qodef-svg-separator-medium {
        .qodef-svg-separator {
            svg {
                height: 26px;
				width: 78px;
            }
        }
    }

    &.qodef-svg-separator-large {
        .qodef-svg-separator {
            svg {
                height: 32px;
				width: 96px;
            }
        }
    }

}

.touch .qodef-svg-separator-holder .qodef-svg-separator {
	opacity: 1 !important;
}

/* ==========================================================================
   End of SVG Separator style
   ========================================================================== */