"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RightChildrenWrapper = exports.LeftChildrenWrapper = exports.Wrapper = void 0;
const styled_1 = __importDefault(require("@emotion/styled"));
exports.Wrapper = styled_1.default.div `
	width: 100%;
	height: 55px;
	box-sizing: border-box;
	top: ${({ zIndex }) => (zIndex && zIndex > 0 ? '0' : 'initial')};
	position: ${({ zIndex }) => (zIndex && zIndex > 0 ? 'sticky' : 'relative')};
	z-index: ${({ zIndex }) => zIndex || 'initial'};

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: ${({ backgroundColor }) => backgroundColor};

	padding: 15px 0;
	text-overflow: ellipsis;
`;
const CommonChildrenWrapper = styled_1.default.div `
	position: absolute;
	top: 0;
	bottom: 0;

	cursor: ${({ onClick }) => (onClick ? 'pointer' : 'auto')};
`;
exports.LeftChildrenWrapper = (0, styled_1.default)(CommonChildrenWrapper) `
	left: 15px;
`;
exports.RightChildrenWrapper = (0, styled_1.default)(CommonChildrenWrapper) `
	right: 15px;
`;
