.ct-border-option {
	> *:not(:last-child) {
		margin-bottom: 10px;
	}
}

.ct-border-controls {
	display: flex;
	align-items: center;

	ul {
		flex: 1 0 auto;
		margin-right: 5%;
	}

	> div {
		flex: 0 0 40px;
		width: 40px;
	}

	.ct-radio-option {
		li {
			flex-basis: 0;

			span {
				display: flex;
				position: relative;
				background: #0073aa;
				border-radius: 3px;

				&:before, &:after {
					position: absolute;
					content: '';
					top: 0;
					width: inherit;
					height: inherit;
					background: inherit;
					border-radius: inherit;
				}
			}

			&.active span {
				background: #fff;
			}

			&[data-type="solid"] span {
				width: 25px;
				height: 2px;

				&:before, &:after {
					content: none;
				}
			}

			&[data-type="dashed"] span {
				width: 7px;
				height: 2px;

				&:before {
					left: -13px;
				}

				&:after {
					right: -13px;
				}
			}

			&[data-type="dotted"] span {
				width: 3px;
				height: 3px;

				&:before {
					left: -10px;
				}

				&:after {
					right: -10px;
				}
			}
		}
	}
}