:root {
  --background: #fff;
  --border-primary: #d9d9d9;
  --border-radius: var(--base-size);
  --border-radius-md: calc(var(--base-size) + 2px);
  --border-radius-lg: calc(var(--base-size) + 4px);
  --primary-600: #009ca6;
  --primary-50: #f2f8f7;

  --base-size: 0.125rem;
}

.combo-container {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Trigger button */
.combo-trigger {
  width: 100%;
  padding: 10px 12px;
  height: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--background);
  border: 1px solid var(--border-primary);
}

.combo-placeholder {
  opacity: 0.4;
  line-height: 1;
  font-size: 14px;
}

.combo-trigger:hover {
  border-color: var(--primary-600);
}

.combo-chevron {
  margin-left: 8px;
  font-size: 14px;
}

/* Dropdown panel */
.combo-dropdown {
  position: relative;
  z-index: 1000;
  box-shadow: 0 0 #0000, 0 0 #0000,
              0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-primary);
  background-color: var(--background);
  max-height: 320px;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}


/* Search input inside dropdown */
.combo-search-input-container {
  padding: 12px;
  position: relative;
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid var(--border-primary);
}

.combo-content-container {
  overflow: auto;
  padding: 4px;
}

.combo-search-input {
  border: none;
  font-size: 14px;
  outline: none;
}

/* Item styling */
.combo-item {
  font-family: Lato, sans-serif;
  display: flex;
  width: 100%;
  cursor: pointer;
  border-radius: var(--border-radius);
}

.combo-item:last-child {
  border-bottom: none;
}

.combo-item:hover {
  background-color: var(--primary-50);
}

.combo-item.highlighted {
  background-color: var(--primary-50);
}

.combo-item-content {
  display: flex;
  gap: 8px;

  padding: 6px 8px;
  align-items: center;
}

.combo-checkmark {
  font-weight: bold;
}

.combo-loading {
  padding: 10px 14px;
  text-align: center;
  font-style: italic;
}

.combo-divider {
  margin: 0;
  flex-shrink: 0;
  border-color: var(--border-primary);
  border-width: 1px;
  border-style: solid none none none;
}

.combo-adornment {
  display: flex;
  align-items: center;
  justify-content: center;
}

.combo-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.combo-label {
  margin-bottom: 4px;
  display: block;
  font-size: 14px;
}

.progress {
  width: 100px;
  height: 16px;
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(circle closest-side, black 94%, transparent 100%);
  -webkit-mask-size: 20% 100%;
  -webkit-mask-repeat: repeat-x;
  background: linear-gradient(var(--primary-600) 0 0) left/0 100% no-repeat var(--border-primary);
  animation: progress-c3ir73 1s infinite steps(6);
}

@keyframes progress-anim {
  0% {
    background-position: -150% 0, -150% 0;
  }

  66% {
    background-position: 250% 0, -150% 0;
  }

  100% {
    background-position: 250% 0, 250% 0;
  }
}

@keyframes progress-c3ir73 {
  100% {
    background-size: 120% 100%;
  }
}