/*
This file is part of Telegram Desktop,
the official desktop application for the Telegram messaging service.

For license and copyright information please follow this link:
https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
*/

using "ui/basic.style";
using "ui/widgets/widgets.style";
using "ui/menu_icons.style";
using "media/player/media_player.style";
using "boxes/boxes.style";
using "chat_helpers/chat_helpers.style";

mediaviewOverDuration: 150;

mediaviewPlayback: MediaSlider {
	width: 3px;
	activeFg: mediaviewPlaybackActive;
	inactiveFg: mediaviewPlaybackInactive;
	activeFgOver: mediaviewPlaybackActiveOver;
	inactiveFgOver: mediaviewPlaybackInactive;
	activeFgDisabled: mediaviewPlaybackActive;
	inactiveFgDisabled: mediaviewPlaybackInactive;
	receivedTillFg: mediaviewPlaybackInactiveOver;
	seekSize: size(12px, 12px);
	duration: mediaviewOverDuration;
}
mediaviewPlaybackTop: 49px;
mediaviewPlayProgressTop: 46px;

mediaviewControlsButton: IconButton {
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: mediaviewPlaybackIconRipple;
	}
	rippleAreaPosition: point(0px, 0px);
	duration: mediaviewOverDuration;
}

mediaviewControllerSize: size(480px, 72px);
mediaviewPlayProgressLabel: LabelSimple(defaultLabelSimple) {
	font: font(12px semibold);
	textFg: mediaviewPlaybackProgressFg;
}
mediaviewPlayProgressSkip: 10px;
mediaviewPlayProgressLeft: 4px;
mediaviewPlayButtonTop: 2px;
mediaviewPlayButton: IconButton(mediaviewControlsButton) {
	width: 40px;
	height: 40px;
	rippleAreaSize: 40px;

	icon: icon {{ "player/player_play_big", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player/player_play_big", mediaviewPlaybackIconFgOver }};
	iconPosition: point(8px, 8px);
}
mediaviewPauseIcon: icon {{ "player/player_pause_big", mediaviewPlaybackIconFg }};
mediaviewPauseIconOver: icon {{ "player/player_pause_big", mediaviewPlaybackIconFgOver }};

mediaviewButtonsTop: 6px;
mediaviewButtonsRight: 8px;

mediaviewPipButtonSkip: 4px;
mediaviewPipButton: IconButton(mediaviewControlsButton) {
	width: 32px;
	height: 32px;
	rippleAreaSize: 32px;
	icon: icon {{ "player/player_pip", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player/player_pip", mediaviewPlaybackIconFgOver }};
	iconPosition: point(4px, 4px);
}

mediaviewFullScreenButtonSkip: 4px;
mediaviewFullScreenButton: IconButton(mediaviewPipButton) {
	icon: icon {{ "player/player_fullscreen", mediaviewPlaybackIconFg }};
	iconOver: icon {{ "player/player_fullscreen", mediaviewPlaybackIconFgOver }};
}
mediaviewFullScreenOutIcon: icon {{ "player/player_minimize", mediaviewPlaybackIconFg }};
mediaviewFullScreenOutIconOver: icon {{ "player/player_minimize", mediaviewPlaybackIconFgOver }};

mediaviewVolumeWidth: 75px;
mediaviewControllerRadius: 9px;

mediaviewVolumeIcon0: icon {{ "player/player_volume_off", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon0Over: icon {{ "player/player_volume_off", mediaviewPlaybackIconFgOver }};
mediaviewVolumeIcon1: icon {{ "player/player_volume_small", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon1Over: icon {{ "player/player_volume_small", mediaviewPlaybackIconFgOver }};
mediaviewVolumeIcon2: icon {{ "player/player_volume_on", mediaviewPlaybackIconFg }};
mediaviewVolumeIcon2Over: icon {{ "player/player_volume_on", mediaviewPlaybackIconFgOver }};
mediaviewVolumeTop: 6px;
mediaviewVolumeToggleLeft: 6px;
mediaviewVolumeToggle: IconButton(mediaviewControlsButton) {
	width: 32px;
	height: 32px;
	rippleAreaSize: 32px;
	icon: mediaviewVolumeIcon0;
	iconOver: mediaviewVolumeIcon0Over;
	iconPosition: point(4px, 4px);
}
mediaviewVolumeSkip: 3px;

mediaviewLeft: icon {
	{ "mediaview/next_shadow-flip_horizontal", windowShadowFg }
	{ "mediaview/next-flip_horizontal", mediaviewControlFg }
};
mediaviewRight: icon {
	{ "mediaview/next_shadow", windowShadowFg }
	{ "mediaview/next", mediaviewControlFg }
};
mediaviewSave: icon {{ "mediaview/download", mediaviewControlFg }};
mediaviewRotate: icon {{ "mediaview/rotate", mediaviewControlFg }};
mediaviewMore: icon {{ "title_menu_dots", mediaviewControlFg }};

mediaviewFileRed: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview/file_corner", mediaviewFileRedCornerFg },
};
mediaviewFileYellow: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview/file_corner", mediaviewFileYellowCornerFg },
};
mediaviewFileGreen: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview/file_corner", mediaviewFileGreenCornerFg },
};
mediaviewFileBlue: icon {
	{ size(25px, 25px), mediaviewFileBg },
	{ "mediaview/file_corner", mediaviewFileBlueCornerFg },
};

mediaviewFilePadding: 18px;
mediaviewFileSize: size(340px, 116px);
mediaviewFileNameTop: 4px;
mediaviewFileNameFont: font(semibold 14px);
mediaviewFileSizeTop: 29px;
mediaviewFileExtTop: 35px;
mediaviewFileExtFont: font(semibold 18px);
mediaviewFileExtPadding: 10px;
mediaviewFileLinksTop: 57px;
mediaviewFileIconSize: 80px;

mediaviewFileLink: defaultLinkButton;

mediaviewMenuSeparator: MenuSeparator(defaultMenuSeparator) {
	fg: mediaviewMenuFg;
}
mediaviewMenu: Menu(menuWithIcons) {
	itemBg: mediaviewMenuBg;
	itemBgOver: mediaviewMenuBgOver;
	itemFg: mediaviewMenuFg;
	itemFgOver: mediaviewMenuFg;
	itemFgDisabled: mediaviewMenuFg;
	itemFgShortcut: mediaviewMenuFg;
	itemFgShortcutOver: mediaviewMenuFg;
	itemFgShortcutDisabled: mediaviewMenuFg;

	separator: mediaviewMenuSeparator;

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: mediaviewMenuBgRipple;
	}
}
mediaviewMenuShadow: Shadow(defaultEmptyShadow) {
	fallback: mediaviewMenuBg;
}
mediaviewPanelAnimation: PanelAnimation(defaultPanelAnimation) {
	fadeBg: mediaviewMenuBg;
	shadow: mediaviewMenuShadow;
}
mediaviewPopupMenu: PopupMenu(defaultPopupMenu) {
	shadow: mediaviewMenuShadow;
	menu: mediaviewMenu;
	animation: mediaviewPanelAnimation;
}
mediaviewDropdownMenu: DropdownMenu(defaultDropdownMenu) {
	menu: mediaviewMenu;
	wrap: InnerDropdown(defaultInnerDropdown) {
		bg: mediaviewMenuBg;
		animation: mediaviewPanelAnimation;
		scrollPadding: margins(0px, 8px, 0px, 8px);
		shadow: mediaviewMenuShadow;
	}
}

mediaviewSaveMsgCheck: icon {{ "mediaview/save_check", mediaviewSaveMsgFg }};
mediaviewSaveMsgPadding: margins(55px, 19px, 29px, 20px);
mediaviewSaveMsgCheckPos: point(23px, 21px);
mediaviewSaveMsgShowing: 200;
mediaviewSaveMsgShown: 2000;
mediaviewSaveMsgHiding: 2500;
mediaviewSaveMsgStyle: TextStyle(defaultTextStyle) {
	font: font(16px);
	linkFont: font(16px);
	linkFontOver: font(16px underline);
}
mediaviewTextPalette: TextPalette(defaultTextPalette) {
	linkFg: mediaviewTextLinkFg;
	monoFg: mediaviewCaptionFg;
	spoilerFg: mediaviewCaptionFg;
}

mediaviewCaptionStyle: defaultTextStyle;

mediaviewThickFont: semiboldFont;
mediaviewFont: normalFont;
mediaviewTextStyle: defaultTextStyle;

mediaviewTextLeft: 14px;
mediaviewTextSkip: 10px;
mediaviewHeaderTop: 47px;
mediaviewTextTop: 26px;

mediaviewControlSize: 90px;
mediaviewIconSize: size(46px, 54px);
mediaviewIconOver: 36px;

mediaviewWaitHide: 2000;
mediaviewHideDuration: 1000;
mediaviewShowDuration: 200;
mediaviewFadeDuration: 150;

mediaviewDeltaFromLastAction: 5px;
mediaviewSwipeDistance: 80px;

mediaviewCaptionPadding: margins(11px, 6px, 11px, 6px);
mediaviewCaptionMargin: size(11px, 11px);
mediaviewCaptionRadius: 6px;

mediaviewGroupPadding: margins(0px, 14px, 0px, 14px);
mediaviewGroupHeight: 80px;
mediaviewGroupWidth: 56px;
mediaviewGroupWidthMax: 160px;
mediaviewGroupSkip: 3px;
mediaviewGroupSkipCurrent: 12px;

mediaviewMinWidth: 480px;
mediaviewMinHeight: 360px;
mediaviewDefaultLeft: 160px;
mediaviewDefaultTop: 120px;
mediaviewDefaultWidth: 800px;
mediaviewDefaultHeight: 600px;

mediaviewTitleMinimize: icon{
	{ "mediaview/title_viewer_shadow_minimize", windowShadowFg },
	{ "mediaview/title_viewer_button_minimize", mediaviewControlFg },
};
mediaviewTitleMaximize: icon{
	{ "mediaview/title_viewer_shadow_maximize", windowShadowFg },
	{ "mediaview/title_viewer_button_maximize", mediaviewControlFg },
};
mediaviewTitleRestore: icon{
	{ "mediaview/title_viewer_shadow_restore", windowShadowFg },
	{ "mediaview/title_viewer_button_restore", mediaviewControlFg },
};
mediaviewTitleClose: icon{
	{ "mediaview/title_viewer_shadow_close", windowShadowFg },
	{ "mediaview/title_viewer_button_close", mediaviewControlFg },
};
mediaviewTitleButton: IconButton(windowTitleButton) {
	width: 44px;
	height: 32px;
}
mediaviewTitle: WindowTitle(defaultWindowTitle) {
	height: 0px;
	bg: mediaviewBg;
	bgActive: mediaviewBg;
	fg: transparent;
	fgActive: transparent;
	minimize: IconButton(mediaviewTitleButton) {
		icon: mediaviewTitleMinimize;
		iconOver: mediaviewTitleMinimize;
	}
	minimizeIconActive: mediaviewTitleMinimize;
	minimizeIconActiveOver: mediaviewTitleMinimize;
	maximize: IconButton(mediaviewTitleButton) {
		icon: mediaviewTitleMaximize;
		iconOver: mediaviewTitleMaximize;
	}
	maximizeIconActive: mediaviewTitleMaximize;
	maximizeIconActiveOver: mediaviewTitleMaximize;
	restoreIcon: mediaviewTitleRestore;
	restoreIconOver: mediaviewTitleRestore;
	restoreIconActive: mediaviewTitleRestore;
	restoreIconActiveOver: mediaviewTitleRestore;
	close: IconButton(mediaviewTitleButton) {
		icon: mediaviewTitleClose;
		iconOver: mediaviewTitleClose;
	}
	closeIconActive: mediaviewTitleClose;
	closeIconActiveOver: mediaviewTitleClose;
}

mediaviewTitleButtonMac: icon{
	{ "mediaview/title_button_shadow_mac", windowShadowFg },
	{ "mediaview/title_button_mac", mediaviewControlFg },
};
mediaviewTitleMinimizeMac: icon {{ "mediaview/title_button_minimize_mac", mediaviewBg }};
mediaviewTitleMaximizeMac: icon {{ "mediaview/title_button_maximize_mac", mediaviewBg }};
mediaviewTitleRestoreMac: icon {{ "mediaview/title_button_shrink_mac", mediaviewBg }};
mediaviewTitleCloseMac: icon {{ "mediaview/title_button_close_mac", mediaviewBg }};
mediaviewTitleCloseMacPadding: margins(8px, 4px, 0px, 4px);
mediaviewTitleMinimizeMacPadding: margins(0px, 4px, 0px, 4px);
mediaviewTitleMaximizeMacPadding: margins(0px, 4px, 8px, 4px);

mediaviewShadowTop: icon{{ "mediaview/shadow_top", windowShadowFg }};
mediaviewShadowBottom: icon{{ "mediaview/shadow_bottom", windowShadowFg }};

mediaviewSpeedMenu: MediaSpeedMenu(mediaPlayerSpeedMenu) {
	dropdown: DropdownMenu(mediaviewDropdownMenu) {
		menu: Menu(mediaviewMenu) {
			separator: MenuSeparator(mediaviewMenuSeparator) {
				fg: mediaviewMenuBgOver;
				padding: margins(0px, 4px, 0px, 4px);
				width: 6px;
			}
			itemPadding: margins(54px, 7px, 54px, 9px);
			itemFgDisabled: mediaviewTextLinkFg;
		}
	}
	activeCheck: icon {{ "player/player_check", mediaviewTextLinkFg }};
	slider: MediaSlider(defaultContinuousSlider) {
		activeFg: mediaviewTextLinkFg;
		inactiveFg: mediaviewMenuBgOver;
		activeFgOver: mediaviewTextLinkFg;
		inactiveFgOver: mediaviewMenuBgOver;
		activeFgDisabled: mediaviewMenuBgOver;
		receivedTillFg: mediaviewMenuBgOver;
		width: 6px;
		seekSize: size(6px, 6px);
	}

	slow: mediaSpeedSlow;
	slowActive: mediaSpeedSlowActive;
	normal: mediaSpeedNormal;
	normalActive: mediaSpeedNormalActive;
	medium: mediaSpeedMedium;
	mediumActive: mediaSpeedMediumActive;
	fast: mediaSpeedFast;
	fastActive: mediaSpeedFastActive;
	veryFast: mediaSpeedVeryFast;
	veryFastActive: mediaSpeedVeryFastActive;
	superFast: mediaSpeedSuperFast;
	superFastActive: mediaSpeedSuperFastActive;
}
mediaviewSpeedButton: MediaSpeedButton(mediaPlayerSpeedButton) {
	size: size(32px, 32px);
	padding: margins(0px, 0px, 0px, 0px);
	fg: mediaviewPlaybackIconFg;
	overFg: mediaviewPlaybackIconFgOver;
	activeFg: mediaviewTextLinkFg;
	icon: icon{{ "player/player_speed", mediaviewPlaybackIconFg }};
	ripple: RippleAnimation(defaultRippleAnimation) {
		color: mediaviewPlaybackIconRipple;
	}
	rippleActiveColor: mediaviewPlaybackIconRipple;
	rippleRadius: 16px;
	menu: mediaviewSpeedMenu;
	menuAlign: align(bottomright);
}

themePreviewSize: size(903px, 584px);
themePreviewBg: windowBg;
themePreviewOverlayOpacity: 0.8;
themePreviewMargin: margins(36px, 72px, 36px, 88px);
themePreviewTitleTop: 24px;
themePreviewTitleFg: windowBoldFg;
themePreviewTitleFont: font(17px semibold);
themePreviewLoadingFont: font(16px);
themePreviewLoadingFg: windowSubTextFg;
themePreviewApplyButton: RoundButton(defaultActiveButton) {
	height: 38px;
	font: font(15px semibold);
}
themePreviewCancelButton: RoundButton(defaultLightButton) {
	height: 38px;
	font: font(15px semibold);
}
themePreviewButtonsSkip: 20px;
themePreviewDialogsWidth: 312px;

pipDefaultSize: 320px;
pipMinimalSize: 120px;
pipBorderSkip: 20px;
pipBorderSnapArea: 16px;
pipResizeArea: 10px;
pipControlSkip: 6px;
pipPlaybackWidth: 2px;
pipPlaybackWide: 4px;
pipPlaybackSkip: 4px;
pipPlaybackTextSkip: 6px;
pipPlaybackFont: font(11px);
pipPlayIcon: icon {{ "player/player_pip_play", mediaviewPipControlsFg }};
pipPlayIconOver: icon {{ "player/player_pip_play", mediaviewPipControlsFgOver }};
pipPauseIcon: icon {{ "player/player_pip_pause", mediaviewPipControlsFg }};
pipPauseIconOver: icon {{ "player/player_pip_pause", mediaviewPipControlsFgOver }};
pipCloseIcon: icon {{ "player/player_pip_close", mediaviewPipControlsFg }};
pipCloseIconOver: icon {{ "player/player_pip_close", mediaviewPipControlsFgOver }};
pipEnlargeIcon: icon {{ "player/player_pip_enlarge", mediaviewPipControlsFg }};
pipEnlargeIconOver: icon {{ "player/player_pip_enlarge", mediaviewPipControlsFgOver }};
pipVolumeIcon0: icon {{ "player/player_volume_off", mediaviewPipControlsFg }};
pipVolumeIcon0Over: icon {{ "player/player_volume_off", mediaviewPipControlsFgOver }};
pipVolumeIcon1: icon {{ "player/player_volume_small", mediaviewPipControlsFg }};
pipVolumeIcon1Over: icon {{ "player/player_volume_small", mediaviewPipControlsFgOver }};
pipVolumeIcon2: icon {{ "player/player_volume_on", mediaviewPipControlsFg }};
pipVolumeIcon2Over: icon {{ "player/player_volume_on", mediaviewPipControlsFgOver }};

speedSliderDividerSize: size(2px, 8px);

storiesMaxSize: size(540px, 960px);
storiesSiblingWidthMin: 200px; // Try making sibling not less than this.
storiesMaxNameFontSize: 17px;
storiesRadius: 8px;
storiesControlSize: 64px;
storiesLeft: icon {{ "mediaview/stories_next-flip_horizontal", mediaviewControlFg }};
storiesRight: icon {{ "mediaview/stories_next", mediaviewControlFg }};
storiesSliderWidth: 2px;
storiesSliderMargin: margins(8px, 7px, 8px, 6px);
storiesSliderSkip: 4px;
storiesSliderOutsideSkip: 4px;
storiesHeaderMargin: margins(12px, 4px, 12px, 8px);
storiesHeaderPhoto: UserpicButton(defaultUserpicButton) {
	size: size(28px, 28px);
	photoSize: 28px;
}
storiesHeaderName: FlatLabel(defaultFlatLabel) {
	textFg: mediaviewControlFg;
	style: semiboldTextStyle;
}
storiesHeaderNamePosition: point(50px, 0px);
storiesHeaderDate: FlatLabel(defaultFlatLabel) {
	textFg: mediaviewControlFg;
}
storiesHeaderDatePosition: point(50px, 17px);
storiesShadowTop: icon{{ "mediaview/shadow_bottom-flip_vertical", windowShadowFg }};
storiesShadowBottom: mediaviewShadowBottom;
storiesControlsMinWidth: 280px;
storiesFieldMargin: margins(0px, 14px, 0px, 16px);
storiesSideSkip: 145px;
storiesCaptionFull: FlatLabel(defaultFlatLabel) {
	style: mediaviewCaptionStyle;
	textFg: mediaviewCaptionFg;
	minWidth: 360px;
}
storiesComposeBg: groupCallMembersBg;
storiesComposeBgOver: groupCallMembersBgOver;
storiesComposeBgRipple: groupCallMembersBgRipple;
storiesComposeWhiteText: groupCallMembersFg;
storiesComposeGrayText: groupCallMemberNotJoinedStatus;
storiesComposeGrayIcon: groupCallMemberInactiveIcon;
storiesComposeBlue: groupCallActiveFg;
storiesComposeRippleLight: RippleAnimation(defaultRippleAnimation) {
	color: storiesComposeBgOver;
}
storiesComposeRipple: RippleAnimation(defaultRippleAnimation) {
	color: groupCallMembersBgRipple;
}
storiesAttach: IconButton(historyAttach) {
	icon: icon {{ "chat/input_attach", storiesComposeGrayIcon }};
	iconOver: icon {{ "chat/input_attach", storiesComposeGrayIcon }};
	ripple: storiesComposeRippleLight;
}
storiesRecordVoice: icon {{ "chat/input_record", storiesComposeGrayIcon }};
storiesRecordVoiceOver: icon {{ "chat/input_record", storiesComposeGrayIcon }};
storiesRemoveSet: IconButton(stickerPanRemoveSet) {
	icon: icon {{ "simple_close", storiesComposeGrayIcon }};
	iconOver: icon {{ "simple_close", storiesComposeGrayIcon }};
	ripple: storiesComposeRippleLight;
}
storiesMenuSeparator: MenuSeparator(defaultMenuSeparator) {
	fg: groupCallMenuBgOver;
}
storiesMenu: Menu(defaultMenu) {
	itemBg: groupCallMenuBg;
	itemBgOver: groupCallMenuBgOver;
	itemFg: groupCallMembersFg;
	itemFgOver: groupCallMembersFg;
	itemFgDisabled: groupCallMemberNotJoinedStatus;
	itemFgShortcut: groupCallMemberNotJoinedStatus;
	itemFgShortcutOver: groupCallMemberNotJoinedStatus;
	itemFgShortcutDisabled: groupCallMemberNotJoinedStatus;

	separator: storiesMenuSeparator;
	arrow: icon {{ "menu/submenu_arrow", groupCallMemberNotJoinedStatus }};

	ripple: RippleAnimation(defaultRippleAnimation) {
		color: groupCallMenuBgRipple;
	}
}
storiesMenuShadow: Shadow(defaultEmptyShadow) {
	fallback: groupCallMenuBg;
}
storiesMenuAnimation: PanelAnimation(defaultPanelAnimation) {
	fadeBg: groupCallMenuBg;
	shadow: storiesMenuShadow;
}
storiesPopupMenu: PopupMenu(defaultPopupMenu) {
	shadow: storiesMenuShadow;
	menu: storiesMenu;
	animation: storiesMenuAnimation;
}
storiesMenuWithIcons: Menu(storiesMenu) {
	itemIconPosition: point(15px, 5px);
	itemPadding: margins(54px, 8px, 17px, 8px);
}
storiesPopupMenuWithIcons: PopupMenu(storiesPopupMenu) {
	scrollPadding: margins(0px, 5px, 0px, 5px);
	menu: storiesMenuWithIcons;
}

storiesAttachEmojiInner: IconButton(storiesAttach) {
	icon: icon {{ "chat/input_smile_face", storiesComposeGrayIcon }};
	iconOver: icon {{ "chat/input_smile_face", storiesComposeGrayIcon }};
}
storiesAttachEmoji: EmojiButton(historyAttachEmoji) {
	inner: storiesAttachEmojiInner;
	bg: storiesComposeBg;
	lineFg: storiesComposeGrayIcon;
	lineFgOver: storiesComposeGrayIcon;
}
storiesComposePremium: PremiumLimits(defaultPremiumLimits) {
	boxLabel: FlatLabel(boxLabel) {
		textFg: groupCallMembersFg;
	}
	nonPremiumBg: storiesComposeBgOver;
	nonPremiumFg: storiesComposeWhiteText;
}
storiesComposeControls: ComposeControls(defaultComposeControls) {
	bg: storiesComposeBg;
	radius: storiesRadius;
	field: InputField(historyComposeField) {
		textFg: storiesComposeWhiteText;
		textBg: storiesComposeBg;
		placeholderFg: storiesComposeGrayText;
		placeholderFgActive: storiesComposeGrayText;
		placeholderFgError: storiesComposeGrayText;
		menu: storiesPopupMenu;
	}
	send: SendButton(historySend) {
		inner: IconButton(storiesAttach) {
			icon: icon {{ "chat/input_send", storiesComposeBlue }};
			iconOver: icon {{ "chat/input_send", storiesComposeBlue }};
		}
		record: storiesRecordVoice;
		recordOver: storiesRecordVoiceOver;
		sendDisabledFg: storiesComposeGrayText;
	}
	attach: storiesAttach;
	emoji: storiesAttachEmoji;
	suggestions: EmojiSuggestions(defaultEmojiSuggestions) {
		dropdown: InnerDropdown(emojiSuggestionsDropdown) {
			animation: PanelAnimation(defaultPanelAnimation) {
				fadeBg: storiesComposeBg;
			}
			bg: storiesComposeBg;
		}
		bg: storiesComposeBg;
		overBg: storiesComposeBgOver;
		textFg: storiesComposeWhiteText;
		fadeLeft: icon {{ "fade_horizontal-flip_horizontal", storiesComposeBg }};
		fadeRight: icon {{ "fade_horizontal", storiesComposeBg }};
	}
	tabbed: EmojiPan(defaultEmojiPan) {
		showAnimation: PanelAnimation(emojiPanAnimation) {
			fadeBg: storiesComposeBg;
		}
		bg: storiesComposeBg;
		headerFg: storiesComposeGrayText;
		trendingHeaderFg: storiesComposeWhiteText;
		trendingSubheaderFg: storiesComposeGrayText;
		trendingUnreadFg: storiesComposeBlue;
		trendingInstalled: icon {{ "chat/input_save", storiesComposeBlue }};
		overBg: storiesComposeBgOver;
		pathBg: storiesComposeBgRipple;
		pathFg: storiesComposeBgOver;
		textFg: storiesComposeWhiteText;
		categoriesBg: storiesComposeBg;
		categoriesBgOver: storiesComposeBgOver;
		fadeLeft: icon {{ "fade_horizontal-flip_horizontal", storiesComposeBg }};
		fadeRight: icon {{ "fade_horizontal", storiesComposeBg }};
		menu: storiesPopupMenuWithIcons;
		expandedSeparator: MenuSeparator(storiesMenuSeparator) {
			padding: margins(0px, 4px, 0px, 4px);
			width: 6px;
		}
		tabs: SettingsSlider(emojiTabs) {
			barFgActive: storiesComposeBlue;
			labelFg: storiesComposeGrayText;
			labelFgActive: storiesComposeBlue;
			rippleBg: storiesComposeBgOver;
			rippleBgActive: storiesComposeBgOver;
		}
		search: TabbedSearch(defaultTabbedSearch) {
			outer: storiesComposeBg;
			bg: storiesComposeBgOver;
			bgActive: storiesComposeBgRipple;
			fg: storiesComposeGrayIcon;
			fgActive: storiesComposeWhiteText;
			fadeLeft: icon {{ "fade_horizontal-flip_horizontal", storiesComposeBgOver }};
			fadeRight: icon {{ "fade_horizontal", storiesComposeBgOver }};
			field: InputField(defaultTabbedSearchField) {
				placeholderFg: storiesComposeGrayText;
				placeholderFgActive: storiesComposeGrayText;
				placeholderFgError: storiesComposeGrayText;
			}
			search: IconButton(defaultTabbedSearchButton) {
				icon: icon{{ "emoji/emoji_search_input", storiesComposeGrayIcon }};
				iconOver: icon{{ "emoji/emoji_search_input", storiesComposeGrayIcon }};
				ripple: storiesComposeRipple;
			}
			back: IconButton(defaultTabbedSearchBack) {
				icon: icon{{ "emoji/emoji_back", storiesComposeGrayIcon }};
				iconOver: icon{{ "emoji/emoji_back", storiesComposeGrayIcon }};
				ripple: storiesComposeRipple;
			}
			cancel: CrossButton(defaultTabbedSearchCancel) {
				crossFg: storiesComposeGrayIcon;
				crossFgOver: storiesComposeGrayIcon;
				ripple: emptyRippleAnimation;
			}
		}
		removeSet: storiesRemoveSet;
		boxLabel: FlatLabel(boxLabel) {
			textFg: groupCallMembersFg;
		}
		icons: ComposeIcons {
			settings: icon {{ "emoji/emoji_settings", storiesComposeGrayIcon }};

			recent: icon {{ "emoji/emoji_recent", storiesComposeGrayIcon }};
			recentActive: icon {{ "emoji/emoji_recent", storiesComposeWhiteText }};
			people: icon {{ "emoji/emoji_smile", storiesComposeGrayIcon }};
			peopleActive: icon {{ "emoji/emoji_smile", storiesComposeWhiteText }};
			nature: icon {{ "emoji/emoji_nature", storiesComposeGrayIcon }};
			natureActive: icon {{ "emoji/emoji_nature", storiesComposeWhiteText }};
			food: icon {{ "emoji/emoji_food", storiesComposeGrayIcon }};
			foodActive: icon {{ "emoji/emoji_food", storiesComposeWhiteText }};
			activity: icon {{ "emoji/emoji_activities", storiesComposeGrayIcon }};
			activityActive: icon {{ "emoji/emoji_activities", storiesComposeWhiteText }};
			travel: icon {{ "emoji/emoji_travel", storiesComposeGrayIcon }};
			travelActive: icon {{ "emoji/emoji_travel", storiesComposeWhiteText }};
			objects: icon {{ "emoji/emoji_objects", storiesComposeGrayIcon }};
			objectsActive: icon {{ "emoji/emoji_objects", storiesComposeWhiteText }};
			symbols: icon {{ "emoji/emoji_love", storiesComposeGrayIcon }};
			symbolsActive: icon {{ "emoji/emoji_love", storiesComposeWhiteText }};

			menuFave: icon {{ "menu/favorite", storiesComposeWhiteText }};
			menuUnfave: icon {{ "menu/unfavorite", storiesComposeWhiteText }};
			menuStickerSet: icon {{ "menu/stickers", storiesComposeWhiteText }};
			menuRecentRemove: icon {{ "menu/delete", storiesComposeWhiteText }};
			menuGifAdd: icon {{ "menu/gif", storiesComposeWhiteText }};
			menuGifRemove: icon {{ "menu/delete", storiesComposeWhiteText }};
			menuMute: icon {{ "menu/mute", storiesComposeWhiteText }};
			menuSchedule: icon {{ "menu/calendar", storiesComposeWhiteText }};
			menuWhenOnline: icon {{ "menu/send_when_online", storiesComposeWhiteText }};
			menuSpoiler: icon {{ "menu/spoiler_on", storiesComposeWhiteText }};
			menuSpoilerOff: icon {{ "menu/spoiler_off", storiesComposeWhiteText }};
		}
		autocompleteBottomSkip: 10px;
	}
	tabbedHeightMin: 220px;
	tabbedHeightMax: 480px;
	record: RecordBar(defaultRecordBar) {
		bg: storiesComposeBg;
		durationFg: storiesComposeWhiteText;
		radius: storiesRadius;
		cancel: storiesComposeGrayText;
		cancelActive: storiesComposeBlue;
		cancelRipple: storiesComposeRippleLight;
		lock: RecordBarLock(defaultRecordBarLock) {
			ripple: storiesComposeRipple;
			originTop: icon {{ "voice_lock/record_lock_top", storiesComposeBg }};
			originBottom: icon {{ "voice_lock/record_lock_bottom", storiesComposeBg }};
			originBody: icon {{ "voice_lock/record_lock_body", storiesComposeBg }};
			arrow: icon {{ "voice_lock/voice_arrow", storiesComposeGrayIcon }};
			fg: storiesComposeGrayIcon;
		}
		remove: IconButton(storiesAttach) {
			icon: icon {{ "info/info_media_delete", storiesComposeGrayIcon }};
			iconOver: icon {{ "info/info_media_delete", storiesComposeGrayIcon }};
			iconPosition: point(10px, 11px);
		}
	}
	files: ComposeFiles(defaultComposeFiles) {
		check: Check(defaultCheck) {
			untoggledFg: groupCallMemberNotJoinedStatus;
			toggledFg: groupCallActiveFg;
			icon: icon {{ "default_checkbox_check", groupCallMembersFg, point(4px, 7px) }};
		}
		checkbox: Checkbox(defaultBoxCheckbox) {
			textFg: groupCallMembersFg;
			textFgActive: groupCallMembersFg;
			rippleBg: groupCallMembersBgRipple;
			rippleBgActive: groupCallMembersBgRipple;
		}
		menu: IconButton(defaultComposeFilesMenu) {
			icon: icon {{ "title_menu_dots", storiesComposeGrayIcon }};
			iconOver: icon {{ "title_menu_dots", storiesComposeGrayIcon }};
			ripple: storiesComposeRippleLight;
		}
		caption: InputField(defaultComposeFilesField) {
			textFg: storiesComposeWhiteText;
			textBg: storiesComposeBg;
			placeholderFg: storiesComposeGrayText;
			placeholderFgActive: storiesComposeBlue;
			borderFg: storiesComposeGrayText;
			borderFgActive: storiesComposeBlue;
			menu: storiesPopupMenu;
		}
		emoji: EmojiButton(storiesAttachEmoji) {
			inner: IconButton(storiesAttachEmojiInner) {
				width: 30px;
				height: 30px;
				rippleAreaSize: 0px;
			}
		}
		confirmBg: storiesComposeBgOver;
		buttonFile: IconButton(sendBoxAlbumGroupButtonFile) {
			ripple: storiesComposeRipple;
		}
		buttonFileEdit: icon {{ "send_media/send_media_replace", storiesComposeGrayIcon }};
		buttonFileDelete: icon {{ "send_media/send_media_delete", storiesComposeGrayIcon }};
		iconBg: storiesComposeBlue;
		iconPlay: icon {{ "history_file_play", storiesComposeWhiteText }};
		iconImage: icon {{ "history_file_image", storiesComposeWhiteText }};
		iconDocument: icon {{ "history_file_document", storiesComposeWhiteText }};
		nameFg: storiesComposeWhiteText;
		statusFg: storiesComposeGrayText;
	}
	premium: storiesComposePremium;
}