@use '../base';
.link-where-bottom {
    .upper-vertical, .horizontal, .lower-vertical{
        height: 3px;
        position: absolute;
        background-color: var(--primary-color-main);
        display: block;
        z-index: 0;
    }
    .horizontal{
        z-index: 1; // span or should be overlayd over .lower-vertical
        span {
            position: relative;
            top: -10px;
            background: #fff;
            border: 2px solid var(--primary-color-main) ;
            border-radius: 15px;
            height: 30px;
            line-height: 20px;
            padding: 2px 10px;
            width: fit-content;
        }
    }
    &.optionalEnabled{
        .upper-vertical, .horizontal, .lower-vertical{
            height: 3px;
            position: absolute;
            // rgba(255,255,255,0) is white transparent = completely transparent
            background: repeating-linear-gradient( 90deg, rgba(255,255,255,0), rgba(255,255,255,0) 8px, var(--primary-color-main) 8px, var(--primary-color-main) 16px);
            display: block;
        }
        span{
            border: 2px dashed var(--primary-color-main)
        }
    }

    &.notExistsEnabled {
        .upper-vertical, .horizontal, .lower-vertical{
            // rgba(255,255,255,0) is white transparent = completely transparent
		    background: repeating-linear-gradient( 90deg, rgba(255,255,255,0), rgba(255,255,255,0) 8px, #000 8px, #000 16px);
        }
		span {
			border: 3px dashed #000;
			border-radius: 15px;
		}
	}

    &.serviceEnabled {
        .upper-vertical, .horizontal, .lower-vertical{
            height: 3px;
            position: absolute;
            // rgba(255,255,255,0) is white transparent = completely transparent
            background: repeating-linear-gradient( 90deg, rgba(255,255,255,0), rgba(255,255,255,0) 8px, var(--ternary-color-main) 8px, var(--ternary-color-main) 16px);
            display: block;
        }
        span{
            border: 2px dashed var(--ternary-color-main)
        }
	}
}