/* ======================================================
   <!-- Dotted Line -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';

.uix-dotted-line {
	display: inline-block;
	margin: 1.5rem;
	height: 300px;


	/* Small Size */
	&.uix-dotted-line--s {

		width: 1px;
		background: var(--uix-primary-text-color);
		background: linear-gradient(to bottom, var(--uix-primary-text-color) 10%, rgba(255, 255, 255, 0) 0%);
		background-position: left;
		background-size: 1px 8px;
		background-repeat: repeat-y;

		&.is-horizontal {
			background: linear-gradient(to right, var(--uix-primary-text-color) 10%, rgba(255, 255, 255, 0) 0%);
			background-position: top;
			background-size: 8px 1px;
			background-repeat: repeat-x;
			width: 300px;
			height: 1px;
		}

		&.is-circle {
			background: radial-gradient(circle, var(--uix-primary-text-color) 1.5px, transparent 2px);
			background-position: top;
			background-size: 12px 6px;
		}

	}

	/* Medium Size */
	&.uix-dotted-line--m {
		width: 3px;
		background: var(--uix-primary-text-color);
		background: linear-gradient(to bottom, var(--uix-primary-text-color) 20%, rgba(255, 255, 255, 0) 0%);
		background-position: left;
		background-size: 3px 10px;
		background-repeat: repeat-y;

		&.is-horizontal {
			background: linear-gradient(to right, var(--uix-primary-text-color) 20%, rgba(255, 255, 255, 0) 0%);
			background-position: top;
			background-size: 10px 3px;
			background-repeat: repeat-x;
			width: 300px;
			height: 3px;
		}

		&.is-circle {
			background: radial-gradient(circle, var(--uix-primary-text-color) 1.5px, transparent 2px);
			background-position: top;
			background-size: 12px 6px;
		}


	}

	/* Large Size */
	&.uix-dotted-line--l {
		width: 6px;
		background: var(--uix-primary-text-color);
		background: linear-gradient(to bottom, var(--uix-primary-text-color) 30%, rgba(255, 255, 255, 0) 0%);
		background-position: left;
		background-size: 6px 12px;
		background-repeat: repeat-y;


		&.is-horizontal {
			background: linear-gradient(to right, var(--uix-primary-text-color) 30%, rgba(255, 255, 255, 0) 0%);
			background-position: top;
			background-size: 12px 6px;
			background-repeat: repeat-x;
			width: 300px;
			height: 6px;
		}


		&.is-circle {
			background: radial-gradient(circle, var(--uix-primary-text-color) 1.5px, transparent 2px);
			background-position: top;
			background-size: 12px 6px;
		}

	}


}