.segmented-controls-list {
	display: flex;
	padding: 0 1px;

	.btn {
		flex: 1 1 auto;
		border-width: 1px 0;
		position: relative;
		overflow: visible;

		&::before, &::after {
			position: absolute;
      content: "";
      height: calc(100% + 2px);
			width: 1px;
			background: var(--accent-color);
			z-index: 10;
			top: -1px;
		}

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

		&::before {
			left: -1px;
		}

		&:hover {
			&::before, &::after {
				background: var(--headings-color);
				z-index: 11;
			}
		}

		&:active {
			&::before, &::after {
				background: var(--accent-color-intense);
				z-index: 11;
			}
		}

		&.active {
			cursor: default;

			&::before, &::after {
				background: var(--accent-color);
				z-index: 10;
			}
		}

		&:not(:first-child) {
			margin-left: 1px;
		}
	}
}
