@use "../global/common" as global;

/* ------------------------------
 Select2
------------------------------- */
.acms-select2 {
	.Select-control {
		height: global.$acms-form-height-sp;
		background-color: #fbfbfb;
		border: global.$acms-form-border;
		&:hover {
			border-color: global.$acms-form-hover-border-color;
		}
	}
	.Select-input {
		height: global.$acms-form-height-sp;
	}
	.Select--single>.Select-control .Select-value,
	.Select-placeholder {
		height: global.$acms-form-height-sp;
		line-height: 2.2;
	}

	&.is-single {
    .js-target > div > div {
      max-width: calc(100vw - 40px);
    }
		.Select-control {
			.Select-value {
				line-height: 1.7 !important;
				background-color: #fbfbfb;
				border: none;
			}
		}
	}

	@media (min-width: global.$breakpoint-md-min) {
    &.is-single {
      .js-target > div > div {
        max-width: inherit;
      }
    }
		.Select-control {
			height: global.$acms-form-height;
			background-color: #f7f7f7;
		}
		.Select-input {
			height: global.$acms-form-height;
		}
		.Select--single>.Select-control .Select-value,
		.Select-placeholder {
			height: global.$acms-form-height;
			line-height: 2.2;
		}
	}
}

body .Select-multi-value-wrapper>.Select-value {
	margin-top: 3px;
	color: #5A5A5A;
	line-height: 1.8;
	background-color: #EDEDED;
	border: 1px solid #B7B7B7;
	.Select-value-icon {
		border-right: 1px solid #B7B7B7;
		&:hover {
			color: inherit;
			background-color: inherit;
		}
	}
}

