.contextual-bar {
	z-index: 1;

	display: flex;

	overflow: hidden;
	flex-direction: column;
	flex: 0 0 var(--flex-tab-width);

	width: var(--flex-tab-width);
	height: 100%;

	background: var(--color-white);
	box-shadow: 0 3px 1px 2px rgba(31, 35, 41, 0.08);

	&-wrap {
		position: relative;

		display: flex;
		flex-direction: column;
		flex: 1 1 100%;

		max-height: 100%;
	}

	& > .flex-tab {
		width: 100%;
	}

	&__content {
		display: flex;
		overflow: auto;

		flex-direction: column;

		flex: 1 1 auto;

		height: 100%;

		padding: var(--default-padding);
		justify-content: space-between;

		& .section:not(:last-child) {
			margin-bottom: 2rem;
		}
	}

	&__header {
		display: flex;
		flex: 0 0 auto;

		padding: var(--default-padding);

		align-items: end;
		justify-content: flex-end;

		&-data {
			display: flex;
			flex: 1 1;
			align-items: center;
		}

		&-icon {
			margin: 0 0.25rem;

			font-size: 22px;

			&--star {
				fill: none;
			}
		}

		&-title {
			flex: 1;

			margin: 0 0.25rem;

			font-size: 16px;
			font-weight: 400;
		}

		&-close-icon {
			transform: rotate(45deg);

			font-size: 20px;
		}
	}

	& .search-form .rc-input__icon-svg {
		font-size: 1.2rem;
	}
}

@media (width <= 1100px) {
	.contextual-bar {
		position: absolute;
		right: 0;
	}

	.rtl .contextual-bar {
		position: absolute;
		right: unset;
		left: 0;
	}
}

@media (width <= 500px) {
	.contextual-bar {
		position: fixed;
		z-index: 999;
		top: 0;

		width: 100%;
		max-width: var(--flex-tab-width);

		animation: dropup-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95);
	}
}

.attachments {
	&__item {
		transition: background-color 300ms linear;
		margin-bottom: 10px;

		&:hover {
			cursor: pointer;

			background-color: #f7f8fa;
		}

		&-link {
			padding: 8px 0;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}

	&__file,
	&__thumb {
		display: inline-block;
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;

		width: 50px;

		height: 50px;
		margin: 0 8px;

		border-radius: 2px;

		background: radial-gradient(ellipse at center, rgba(155, 169, 186, 1) 0%, rgba(131, 143, 158, 1) 100%);
		background-size: cover;

		font-size: 24px;

		align-items: center;
		justify-content: center;
	}

	&__file {
		&--pdf {
			background: radial-gradient(ellipse at center, rgba(250, 97, 97, 1) 0%, rgba(251, 19, 19, 1) 100%);
		}

		&--sheets {
			background: radial-gradient(ellipse at center, rgba(0, 163, 82, 1) 0%, rgba(2, 114, 59, 1) 100%);
		}

		&--ppt {
			background: radial-gradient(ellipse at center, rgba(250, 109, 77, 1) 0%, rgba(208, 71, 40, 1) 100%);
		}
	}

	&__type {
		overflow: hidden;
		flex: 0 0 auto;

		max-width: 100%;
		padding: 0 10px;

		text-overflow: ellipsis;

		color: white;

		font-size: 10px;
	}

	&__name {
		margin: 0 8px;

		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		min-width: 0;

		color: #2f343d;

		font-size: 14px;
		line-height: 1.5;
	}

	&__details {
		margin: 0 8px 2px;

		white-space: nowrap;
		text-overflow: ellipsis;

		font-size: 12px;
	}

	&__bold {
		font-weight: 600;
	}

	&__content {
		display: flex;

		overflow: hidden;
		flex-direction: column;

		flex: 1 1 100%;

		color: #9ea2a8;
	}
}

.contextual-bar__content.mail-messages {
	& .rc-popup-list {
		z-index: 1;
	}

	& .rc-input:not(:last-child) {
		margin-bottom: 2rem;
	}
}

.mail-messages__instructions {
	display: flex;

	margin-bottom: 3rem;

	padding: 1.25rem;

	color: var(--rc-color-alert-message-primary);

	border-width: 1px;
	border-color: var(--rc-color-alert-message-primary);
	border-radius: 2px;
	background: var(--rc-color-alert-message-primary-background);

	&--selected {

		cursor: pointer;

		color: var(--rc-color-alert-message-secondary);
		border-color: var(--rc-color-alert-message-secondary);
		background: var(--rc-color-alert-message-secondary-background);
	}

	&--warning {
		color: var(--rc-color-alert-message-warning);
		border-color: var(--rc-color-alert-message-warning);
		background: var(--rc-color-alert-message-warning-background);
	}

	&-wrapper {
		display: flex;

		margin: 0 -10px;
	}

	&-icon {
		margin: 0 10px;

		font-size: 2rem;

		&--hand-pointer {
			margin: 0 15px;

			transform: rotate3d(0, 0, 1, -25deg);
			fill: currentColor;
		}
	}

	&-text {
		display: flex;
		flex-direction: column;

		margin: 0 10px;

		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.2rem;

		&-selected {
			font-weight: 400;
		}
	}
}
