@import "/ui/styles/_theme.scss";

.seg {
	pointer-events: all;
	flex-direction: row;
	background-color: $bg-2;
	border: 1px solid $line-strong;
	padding: 0;
	gap: 0;

	.seg-btn {
		pointer-events: all;
		flex-grow: 1;
		flex-basis: 0;
		flex-shrink: 1;
		padding: 12px 16px;
		background-color: transparent;
		border: 0;
		color: $text-dim;
		cursor: pointer;
		font-size: $fs-3;
		font-weight: 700;
		font-family: $font-primary;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		justify-content: center;
		align-items: center;
		transition: background-color 0.08s ease, color 0.08s ease;

		& + .seg-btn { border-left: 1px solid $line-strong; }

		&:hover { background-color: $accent-soft; color: $text; }
		&.active {
			background-color: $accent-soft;
			color: $text;
			font-weight: 800;
			border-bottom: 2px solid $accent;
			&:hover { background-color: $accent-soft; color: $text; }
		}
	}

	&.underline {
		background-color: transparent;
		border: 0;
		border-bottom: 1px solid $line-strong;
		gap: 4px;
		padding: 0 0 0 0;

		.seg-btn {
			flex-grow: 0;
			flex-basis: auto;
			padding: 9px 18px;
			border-bottom: 2px solid transparent;
			color: $text-faint;
			font-family: $font-mono;
			font-size: $fs-2;
			letter-spacing: 2px;

			& + .seg-btn { border-left: 0; }

			&:hover { background-color: transparent; color: $text; }
			&.active {
				background-color: transparent;
				color: $accent;
				border-bottom: 2px solid $accent;
				&:hover { background-color: transparent; color: $accent; }
			}
		}
	}

	&.solid {
		background-color: transparent;
		border: 0;
		gap: 6px;
		padding: 0;

		.seg-btn {
			flex-grow: 1;
			flex-basis: 0;
			background-color: $bg-2;
			border: 1px solid $line-strong;
			padding: 8px 14px;
			font-family: $font-mono;
			font-size: $fs-2;
			letter-spacing: 1.4px;

			& + .seg-btn { border-left: 1px solid $line-strong; }

			&:hover { background-color: $bg-2; color: $text; border-color: $accent; }
			&.active {
				background-color: $accent;
				border-color: $accent;
				color: $accent-ink;
				border-bottom: 1px solid $accent;
				&:hover { background-color: $accent; color: $accent-ink; }
			}
		}
	}
}