:root {
	/* Typography */
	--font-family: Inter, sans-serif;
	--font-size-sm: 14px;

	/* Colors (Mantine default-ish) */
	--gray-3: #dee2e6;
	--gray-4: #ced4da;
	--gray-5: #adb5bd;
	--gray-6: #868e96;
	--blue-6: #228be6;

	/* Radius */
	--radius-sm: 4px;
	--radius-sm: 8px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.Select {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
}

.Select-control {
  display: table;
  width: 100%;
  height: 36px;
  border: 1px solid var(--gray-4);
  border-radius: 4px;
}

.Select-control:hover {
	border-color: var(--gray-5);
}

.is-focused .Select-control {
	border-color: var(--blue-6);
	box-shadow: 0 0 0 1px var(--blue-6);
}

.Select-placeholder {
	color: var(--gray-6);
	padding-left: 12px;
}

.Select-input > input {
	font-family: inherit;
	font-size: var(--font-size-sm);
	padding-left: 12px;
}

.Select-menu-outer {
	margin-top: 4px;
	border: 1px solid var(--gray-3);
	border-radius: 4px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.Select-option {
	padding: 8px 12px;
	cursor: pointer;
}

.Select-option.is-focused {
	background-color: #f1f3f5;
}

.Select-option.is-selected {
	background-color: var(--blue-6);
	color: white;
}

.Select-value,
.Select-placeholder {
  line-height: 34px;
}

.Select-input {
  height: 34px;
}

.Select-arrow-zone {
  padding-right: 8px;
}

.Select-input,
.Select-placeholder,
.Select-value {
  display: table-cell;
  vertical-align: middle;
}

.Select-arrow-zone {
  display: table-cell;
  vertical-align: middle;
  width: 25px;
  text-align: center;
}

/* Ensure both behave like aligned table cells */
.Select-placeholder,
.Select-input,
.Select-value {
  display: table-cell;
  vertical-align: middle;
}

/* Ensure both behave like aligned table cells */
.Select-placeholder,
.Select-input,
.Select-value {
  display: table-cell;
  vertical-align: middle;
}

.Select-placeholder {
  padding-left: 12px;
}

.Select-input {
  padding-left: 12px;
}

.Select-input > input {
  padding: 0;
  margin: 0;
}

/* Keep full rounding even when open */
.is-open > .Select-control {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.is-disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #e9ecef;
    color: #adb5bd;
}

.is-disabled:hover {
	cursor: not-allowed;
}