"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
const TextStyles_1 = require("../../../core/TextStyles");
const Colors_1 = require("../../../core/Colors");
exports.className = {
    segmentControl: 'segment-control',
    segmentLabel: 'segment-label',
};
exports.Control = styled_1.default.div `
	width: ${({ width }) => `${width}%`};
	background-color: ${Colors_1.basicColors.white};
	position: absolute;
	left: ${({ control }) => `${control}%`};
	transition: left 0.4s ease-out;
	z-index: -10 !important;
	border-radius: 8px;
	box-shadow: 0px 2px 4px rgba(208, 208, 208, 0.5);
`;
exports.Label = styled_1.default.label `
	${TextStyles_1.typography.h6};
	font-weight: 700;
	transition: all 0.4s ease-out;
	color: ${({ active }) => (active ? Colors_1.basicColors.gray900 : Colors_1.basicColors.gray200)};
`;
exports.Wrapper = styled_1.default.div `
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	position: relative;
	background-color: ${Colors_1.semanticColors.segmentControlContainer};
	z-index: 5;
	border-radius: 10px;
	padding: 4px;
`;
exports.Input = styled_1.default.input `
	display: none;
`;
exports.LabelWrapper = styled_1.default.div `
	width: calc(100% - 8px);
	height: 40px;
	box-sizing: border-box;
	position: absolute;

	& > .${exports.className.segmentControl}, .${exports.className.segmentLabel} {
		width: ${({ width }) => `${width}%`};
		height: 40px;
		text-align: center;
		display: inline-block;
		z-index: 2;
		line-height: 40px;
		cursor: pointer;
	}
`;
