<commit_before>@import '~@proton/styles/scss/config';

.composer {
	position: absolute;
	inset-block-end: 0;
	z-index: calc(#{$layer-floating-frames} + var(--z-position, 0));

	block-size: rem(640);
	inline-size: rem(640);
	max-block-size: 100%;
	max-inline-size: 100%;
	overflow: hidden;

	background: var(--background-norm);
	box-shadow: var(--shadow-lifted);
	color: var(--text-norm);

	transition: 0.15s easing(easeOutQuint);

	transform: translateX(var(--composer-drag-offset));

	border-end-start-radius: 0;
	border-end-end-radius: 0;

	@include respond-to($breakpoint-small) {
		border-radius: 0;
	}

	// containers ------------------------------------------
	&-container {
		overflow: hidden;
		background: var(--background-norm);
	}

	&-blur-container {
		transition: opacity 0.15s ease-out;
	}

	// header
	&-title-bar {
		background: var(--background-strong);
		color: var(--text-norm);
		transition: background 0.15s ease-out;

		& > * {
			transition: opacity 0.15s ease-out;
		}

		&-tooltip {
			align-self: stretch;
			justify-content: stretch;
			align-items: stretch;
		}
	}

	// metas
	&-meta {
		.composer-addresses-fakefield {
			min-block-size: rem(44);
			max-block-size: 2.5em;
			padding-inline-end: rem(1);
			cursor: text;
			&.disabled {
				color: var(--field-disabled-text-color);
				border-color: var(--field-disabled);
				.composer-addresses-addressIcon {
					opacity: 0.5;
				}
			}
		}
	}
	&-meta-label {
		padding-block-start: 0.85em;

		&,
		&.label {
			max-inline-size: 8em;
			inline-size: 15%;
			@include respond-to($breakpoint-small) {
				// temporary workaround
				inline-size: 100%;
				max-inline-size: 100%;
				padding-block-start: 0.85em;
			}
		}
	}

	// addresses
	&-addresses-container {
		display: flex;
		flex-wrap: wrap;
		inline-size: 100%;
		position: relative;
		// max-block-size: 100px;
		overflow-y: auto;
		overflow-x: hidden;

		&.field {
			padding-block: 0.25em;
			padding-inline: 0.5em;
			block-size: auto !important;
		}

		&.composer-addresses-container-closed {
			padding-inline-end: rem(1);
		}

		&::after {
			// trick to keep space in case of loooooooong email with scroll and last one
			content: '';
			inline-size: 100%;
			block-size: rem(1);
		}

		&-line:not(:first-child) {
			padding-inline-end: rem(30);
		}

		.field {
			border: none;
			padding: 0;
			min-inline-size: rem(100);
			background: inherit;
			block-size: auto;

			&:focus {
				box-shadow: none;
			}
		}
	}

	/*
		everything inside addresses should be inline in order to
		make "ellipsis" properly working, so fixed the alignment of
		image this way
	*/
	&-addresses-addressIcon {
		inset-block-start: rem(-2);
		&:empty {
			margin-inline-end: 0;
		}
	}
	&-addresses-autocomplete {
		max-block-size: 100%;
		ul {
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: calc(100% + 5px);
			z-index: 1;
			list-style: none;
			box-shadow: var(--shadow-lifted);
			background: var(--background-norm);
			inline-size: calc(100% - 40px);
			margin-block: 0;
			margin-inline: 20px 0;
			padding: 0;

			max-block-size: rem(200);
			overflow-y: auto;
			overflow-x: hidden;
		}

		li {
			cursor: pointer;
			padding: 0.5em;
			text-overflow: ellipsis;
			max-inline-size: 100%;
			overflow: hidden;

			&[aria-selected='true'] {
				background-color: var(--interaction-norm);
				color: var(--interaction-norm-contrast);
			}

			&:hover {
				background-color: var(--background-weak);
			}
		}

		.visually-hidden {
			position: absolute;
			clip: rect(0, 0, 0, 0);
		}
	}

	&-editor-cc,
	&-editor-bcc {
		.composer-addresses-container {
			max-height: rem(100);
		}
	}

	&-addresses-input-container {
		// Here I tried to keep field height only with margin calculations
		margin-block: calc(#{em(6)} - 0.25em);
		margin-inline: calc(#{em(16)} - 0.5em) 0.5em;
		min-inline-size: 7em; // magic number just to force it wrapping below to avoid issue
	}

	&-addresses-item {
		background-color: var(--background-weak);
		text-shadow: none;

		+ .composer-addresses-input-container {
			margin-inline-start: 0;
			margin-block: calc(0.25em + 1px);
		}

		&.invalid {
			border-color: var(--signal-danger);
			color: var(--signal-danger);

			.composer-addresses-item-label {
				border-right-color: currentColor;
			}
		}
	}

	&-to-editor {
		block-size: auto;
		min-block-size: rem($default-height-fields); // to avoid tiny layout shifts
		max-block-size: 100px;
		overflow-y: auto;
		// background: green;
		padding-block: 0;
		padding-inline-end: rem(1);
		&.composer-editor-expanded {
			padding-inline-start: 0.5em;
			.field:empty {
				// only for placeholder position when empty
				margin-inline-start: 0.65em;
				// border: 1px solid red;
			}
		}
		.composer-addresses-input-container {
			margin-inline-start: 0;
			padding-block: 1px 0;
		}
	}

	// remove left padding on mobile to align properly everything
	&-meta-select-sender.select, // specificity :-]
	&-meta-input-subject,
	&-meta-fakefield-summary,
	&-to-editor.composer-editor-expanded,
	&-to-editor.composer-editor-collapsed,
	&-to-editor.composer-editor-expanded .field:empty,
	&-to-editor.composer-editor-collapsed .field:empty,
	& &-addresses-container.field, // specificity :-] (only for composer)
	& &-addresses-container.field &-addresses-input-container {
		@include respond-to($breakpoint-small) {
			padding-inline-start: 0;
			margin-inline-start: 0;
		}
	}

	// content
	.composer-content {
		min-block-size: 10em;
		// forced to white because HTML edition and not yet Dark mode supported
		&--rich-edition,
		.editor--disabled::after {
			background: white;
		}
	}

	.editor {
		border: 0;
		padding: 0;
	}
	.editor-toolbar {
		max-width: em(640);
	}

	&-editor-dropzone {
		border: 1px dashed var(--border-norm);
		background-color: var(--background-norm);
		opacity: 1;
	}

	&-body-container {
		overflow-y: auto;
		overflow-x: hidden;

		textarea {
			resize: none;
			font-family: $font-family-monospace;
		}
	}

	&-attachments-button-wrapper {
		position: relative;
		overflow: hidden;
		padding: 5px; // hack to save space for the hover halo on the button
		margin: -5px;

		input[type='file'] {
			position: absolute;
			opacity: 0;
			inline-size: 0;
			block-size: 0;
		}

		input[type='file']:hover + .button,
		input[type='file']:focus + .button,
		input[type='file']:focus-within + .button {
			color: var(--text-norm);
			box-shadow: var(--shadow-norm);
		}

		/* Fix for Safari */
		input[type='file']::-webkit-file-upload-button {
			display: none;
		}
	}

	// overrides only in composer case
	&-attachments-list {
		background-color: var(--background-norm);
		padding-inline: 1.25em 1.5em;

		.message-attachmentList {
			overflow: auto;
			max-block-size: 8.5em;
		}
	}

	&-inner-modal {
		background: var(--backdrop-norm);

		.inner-modal {
			inline-size: rem(340);
			max-block-size: 90%;
			@include respond-to($breakpoint-small) {
				block-size: auto;
			}
			&-header {
				padding-block: rem(24) 0;
			}
			&-title {
				font-size: em(16);
				font-weight: var(--font-weight-bold);
			}
		}
	}

	// footer
	&-more-dropdown {
		padding-block: em(9.5); // To have same height as fields
		padding-inline: em(10);
	}

	&-actions--has-scroll {
		margin-block-start: 0.5em;
		padding-block-start: 0.5em;
		box-shadow: 0 -5px 5px 0 var(--background-strong);
	}

	// Keep minimal size when activity label is empty
	&-send-button {
		min-inline-size: rem(40);
		@include respond-to($breakpoint-small) {
			min-inline-size: 0;
		}
	}

	&-addresses-item-dragged {
		position: absolute;
		cursor: move;
	}

	&-addresses-item-drag-placeholder {
		inline-size: var(--width, 5em);
		border-radius: var(--border-radius-md);
		border: 1px dashed currentColor;
	}

	// states
	&-editor-collapsed {
		min-block-size: rem(44);
		block-size: auto; // if I put 44 here, works, but not for 2 lines :-\
		padding-inline-start: 0.5em;
		padding-block: 0;

		.field {
			border: none;
			padding: 0;
			min-inline-size: rem(100);
			block-size: auto;
			min-block-size: 0; // avoid tiny layout shift

			&:empty {
				margin-inline-start: 0.65em;
			}

			&:focus {
				box-shadow: none;
			}
		}
	}

	&--is-blur {
		--blur-opacity: 0.25;

		box-shadow: var(--shadow-norm);

		.composer-title-bar {
			background: var(--background-weak);
			color: var(text-norm);

			& > * {
				opacity: var(--blur-opacity);
			}
		}

		.composer-blur-container {
			opacity: var(--blur-opacity);
			pointer-events: none;
		}
	}

	&--is-minimized {
		block-size: 2.5em; // title bar height
	}

	&--is-maximized {
		@include respond-to($breakpoint-medium-landscape, 'min') {
			.message-attachmentList-item-container {
				inline-size: calc((100% / 3) - (1em / 3));
			}
		}
	}
}

.addresses-contacts-table {
	th:first-child {
		inline-size: rem(35);
	}
}
<commit_msg>No transition on dragging the composer<commit_after>@import '~@proton/styles/scss/config';

.composer {
	position: absolute;
	inset-block-end: 0;
	z-index: calc(#{$layer-floating-frames} + var(--z-position, 0));

	block-size: rem(640);
	inline-size: rem(640);
	max-block-size: 100%;
	max-inline-size: 100%;
	overflow: hidden;

	background: var(--background-norm);
	box-shadow: var(--shadow-lifted);
	color: var(--text-norm);

	transition: 0.15s easing(easeOutQuint), transform 0s;

	transform: translateX(var(--composer-drag-offset));

	border-end-start-radius: 0;
	border-end-end-radius: 0;

	@include respond-to($breakpoint-small) {
		border-radius: 0;
	}

	// containers ------------------------------------------
	&-container {
		overflow: hidden;
		background: var(--background-norm);
	}

	&-blur-container {
		transition: opacity 0.15s ease-out;
	}

	// header
	&-title-bar {
		background: var(--background-strong);
		color: var(--text-norm);
		transition: background 0.15s ease-out;

		& > * {
			transition: opacity 0.15s ease-out;
		}

		&-tooltip {
			align-self: stretch;
			justify-content: stretch;
			align-items: stretch;
		}
	}

	// metas
	&-meta {
		.composer-addresses-fakefield {
			min-block-size: rem(44);
			max-block-size: 2.5em;
			padding-inline-end: rem(1);
			cursor: text;
			&.disabled {
				color: var(--field-disabled-text-color);
				border-color: var(--field-disabled);
				.composer-addresses-addressIcon {
					opacity: 0.5;
				}
			}
		}
	}
	&-meta-label {
		padding-block-start: 0.85em;

		&,
		&.label {
			max-inline-size: 8em;
			inline-size: 15%;
			@include respond-to($breakpoint-small) {
				// temporary workaround
				inline-size: 100%;
				max-inline-size: 100%;
				padding-block-start: 0.85em;
			}
		}
	}

	// addresses
	&-addresses-container {
		display: flex;
		flex-wrap: wrap;
		inline-size: 100%;
		position: relative;
		// max-block-size: 100px;
		overflow-y: auto;
		overflow-x: hidden;

		&.field {
			padding-block: 0.25em;
			padding-inline: 0.5em;
			block-size: auto !important;
		}

		&.composer-addresses-container-closed {
			padding-inline-end: rem(1);
		}

		&::after {
			// trick to keep space in case of loooooooong email with scroll and last one
			content: '';
			inline-size: 100%;
			block-size: rem(1);
		}

		&-line:not(:first-child) {
			padding-inline-end: rem(30);
		}

		.field {
			border: none;
			padding: 0;
			min-inline-size: rem(100);
			background: inherit;
			block-size: auto;

			&:focus {
				box-shadow: none;
			}
		}
	}

	/*
		everything inside addresses should be inline in order to
		make "ellipsis" properly working, so fixed the alignment of
		image this way
	*/
	&-addresses-addressIcon {
		inset-block-start: rem(-2);
		&:empty {
			margin-inline-end: 0;
		}
	}
	&-addresses-autocomplete {
		max-block-size: 100%;
		ul {
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: calc(100% + 5px);
			z-index: 1;
			list-style: none;
			box-shadow: var(--shadow-lifted);
			background: var(--background-norm);
			inline-size: calc(100% - 40px);
			margin-block: 0;
			margin-inline: 20px 0;
			padding: 0;

			max-block-size: rem(200);
			overflow-y: auto;
			overflow-x: hidden;
		}

		li {
			cursor: pointer;
			padding: 0.5em;
			text-overflow: ellipsis;
			max-inline-size: 100%;
			overflow: hidden;

			&[aria-selected='true'] {
				background-color: var(--interaction-norm);
				color: var(--interaction-norm-contrast);
			}

			&:hover {
				background-color: var(--background-weak);
			}
		}

		.visually-hidden {
			position: absolute;
			clip: rect(0, 0, 0, 0);
		}
	}

	&-editor-cc,
	&-editor-bcc {
		.composer-addresses-container {
			max-height: rem(100);
		}
	}

	&-addresses-input-container {
		// Here I tried to keep field height only with margin calculations
		margin-block: calc(#{em(6)} - 0.25em);
		margin-inline: calc(#{em(16)} - 0.5em) 0.5em;
		min-inline-size: 7em; // magic number just to force it wrapping below to avoid issue
	}

	&-addresses-item {
		background-color: var(--background-weak);
		text-shadow: none;

		+ .composer-addresses-input-container {
			margin-inline-start: 0;
			margin-block: calc(0.25em + 1px);
		}

		&.invalid {
			border-color: var(--signal-danger);
			color: var(--signal-danger);

			.composer-addresses-item-label {
				border-right-color: currentColor;
			}
		}
	}

	&-to-editor {
		block-size: auto;
		min-block-size: rem($default-height-fields); // to avoid tiny layout shifts
		max-block-size: 100px;
		overflow-y: auto;
		// background: green;
		padding-block: 0;
		padding-inline-end: rem(1);
		&.composer-editor-expanded {
			padding-inline-start: 0.5em;
			.field:empty {
				// only for placeholder position when empty
				margin-inline-start: 0.65em;
				// border: 1px solid red;
			}
		}
		.composer-addresses-input-container {
			margin-inline-start: 0;
			padding-block: 1px 0;
		}
	}

	// remove left padding on mobile to align properly everything
	&-meta-select-sender.select, // specificity :-]
	&-meta-input-subject,
	&-meta-fakefield-summary,
	&-to-editor.composer-editor-expanded,
	&-to-editor.composer-editor-collapsed,
	&-to-editor.composer-editor-expanded .field:empty,
	&-to-editor.composer-editor-collapsed .field:empty,
	& &-addresses-container.field, // specificity :-] (only for composer)
	& &-addresses-container.field &-addresses-input-container {
		@include respond-to($breakpoint-small) {
			padding-inline-start: 0;
			margin-inline-start: 0;
		}
	}

	// content
	.composer-content {
		min-block-size: 10em;
		// forced to white because HTML edition and not yet Dark mode supported
		&--rich-edition,
		.editor--disabled::after {
			background: white;
		}
	}

	.editor {
		border: 0;
		padding: 0;
	}
	.editor-toolbar {
		max-width: em(640);
	}

	&-editor-dropzone {
		border: 1px dashed var(--border-norm);
		background-color: var(--background-norm);
		opacity: 1;
	}

	&-body-container {
		overflow-y: auto;
		overflow-x: hidden;

		textarea {
			resize: none;
			font-family: $font-family-monospace;
		}
	}

	&-attachments-button-wrapper {
		position: relative;
		overflow: hidden;
		padding: 5px; // hack to save space for the hover halo on the button
		margin: -5px;

		input[type='file'] {
			position: absolute;
			opacity: 0;
			inline-size: 0;
			block-size: 0;
		}

		input[type='file']:hover + .button,
		input[type='file']:focus + .button,
		input[type='file']:focus-within + .button {
			color: var(--text-norm);
			box-shadow: var(--shadow-norm);
		}

		/* Fix for Safari */
		input[type='file']::-webkit-file-upload-button {
			display: none;
		}
	}

	// overrides only in composer case
	&-attachments-list {
		background-color: var(--background-norm);
		padding-inline: 1.25em 1.5em;

		.message-attachmentList {
			overflow: auto;
			max-block-size: 8.5em;
		}
	}

	&-inner-modal {
		background: var(--backdrop-norm);

		.inner-modal {
			inline-size: rem(340);
			max-block-size: 90%;
			@include respond-to($breakpoint-small) {
				block-size: auto;
			}
			&-header {
				padding-block: rem(24) 0;
			}
			&-title {
				font-size: em(16);
				font-weight: var(--font-weight-bold);
			}
		}
	}

	// footer
	&-more-dropdown {
		padding-block: em(9.5); // To have same height as fields
		padding-inline: em(10);
	}

	&-actions--has-scroll {
		margin-block-start: 0.5em;
		padding-block-start: 0.5em;
		box-shadow: 0 -5px 5px 0 var(--background-strong);
	}

	// Keep minimal size when activity label is empty
	&-send-button {
		min-inline-size: rem(40);
		@include respond-to($breakpoint-small) {
			min-inline-size: 0;
		}
	}

	&-addresses-item-dragged {
		position: absolute;
		cursor: move;
	}

	&-addresses-item-drag-placeholder {
		inline-size: var(--width, 5em);
		border-radius: var(--border-radius-md);
		border: 1px dashed currentColor;
	}

	// states
	&-editor-collapsed {
		min-block-size: rem(44);
		block-size: auto; // if I put 44 here, works, but not for 2 lines :-\
		padding-inline-start: 0.5em;
		padding-block: 0;

		.field {
			border: none;
			padding: 0;
			min-inline-size: rem(100);
			block-size: auto;
			min-block-size: 0; // avoid tiny layout shift

			&:empty {
				margin-inline-start: 0.65em;
			}

			&:focus {
				box-shadow: none;
			}
		}
	}

	&--is-blur {
		--blur-opacity: 0.25;

		box-shadow: var(--shadow-norm);

		.composer-title-bar {
			background: var(--background-weak);
			color: var(text-norm);

			& > * {
				opacity: var(--blur-opacity);
			}
		}

		.composer-blur-container {
			opacity: var(--blur-opacity);
			pointer-events: none;
		}
	}

	&--is-minimized {
		block-size: 2.5em; // title bar height
	}

	&--is-maximized {
		@include respond-to($breakpoint-medium-landscape, 'min') {
			.message-attachmentList-item-container {
				inline-size: calc((100% / 3) - (1em / 3));
			}
		}
	}
}

.addresses-contacts-table {
	th:first-child {
		inline-size: rem(35);
	}
}

{'fraction_non_alphanumeric': 0.17007650892604137, 'fraction_numerical': 0.024766222725984697, 'mean_word_length': 2.741730279898219, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '978592', 'n_tokens_mistral': 7920, 'n_tokens_neox': 6485, 'n_words': 1313}