.t-contact-method__container {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.t-contact-method__types-container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.t-contact-method__type {
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
	position: relative;
}

.t-contact-method__type:has(> .t-radio:checked) {
	background-color: none;
	border: 1px solid rgba(0, 0, 0, 0.4);
}

.t-contact-method__type-input {
	position: absolute;
	z-index: -1;
	opacity: 0;
	top: 0;
}

.t-contact-method__type-label {
	padding: 8px 9px;
	
	display: flex;
	gap: 4px;
	align-items: center;

	font-weight: inherit;
	margin-bottom: 0;
	cursor: pointer;
}

.t-contact-method__type-label:has(+ .t-radio:disabled) {
	opacity: 0.5;
	cursor: not-allowed;
}

.t-contact-method__hidden {
	display: none !important;
}

/* Перекрывает стили для полей в один ряд. Добавляется лишний стиль для внутреннего инпута способа связи */
.t-form__inputsbox_inrow .t-contact-method__value-container .t-input-block.t-input-block {
	width: 100%;
}
/* Сбрасывает стили отступов для внутреней обертки, которые могут добавляться в блоках. (eg BF403, BF310N)*/
.t-contact-method__value-container .t-input-block {
	margin: 0 !important;	
}

/* Сбрасывает стили, которые задаются на ненужный input-block. Эта обертка нужна только для корректной работы поля, никакие стили к ней не нужно применять */
.t-input-group_contact_method > .t-input-block {
	border-radius: 0 !important;
	overflow: visible !important;
}


@media screen and (max-width: 960px) {
	.t-input-block:has(.t-contact-method__types-container) {
		/* сохраняем в переменную, чтобы можно было ее изменять из других блоков */
		--contact-method-padding-h: 20px;
		
		/* компенсация тени при focus-visible */
		margin-bottom: -6px;
		padding-bottom: 6px;
	}

	.t-contact-method__types-container {
		min-width: 100%;
		/* 
      Нужно указать любое абсолютное значение max-width, чтобы правильно работал горизонтальный скролл.
      
      Мы не можем использовать overflow: auto на .t-input-block, 
      потому что это приводит к обрезанию окна с масками телефона.
      
      Если не указать max-width, кнопки будут выходить за пределы блока, и overflow работать не будет.
    */
		max-width: 100px;
		display: inline-flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;

		mask: linear-gradient(to left, transparent 0, white var(--contact-method-padding-h), white calc(100% - var(--contact-method-padding-h)), transparent 100%);
		
		/* Компенсация отступа под скроллбар на мобильных устройствах */
		padding-bottom: 8px;
		margin-bottom: -8px;
	}

	.t-input-block:has(.t-contact-method__types-container),
	.t-contact-method__types-container {
		padding-left: var(--contact-method-padding-h);
		padding-right: var(--contact-method-padding-h);
		margin-left: calc(var(--contact-method-padding-h) * -1);
		margin-right: calc(var(--contact-method-padding-h) * -1);
	}
	
	/* Размер текста не может быть < 12px */
	.t-contact-method__type-label {
		font-size: max(1rem, 12px);
	}
}