.container {
  position: relative;
  width: fit-content;
}

.trigger {
  display: flex;
  align-items: center;
  gap: map.get($spacing-scale, 's-3');
  width: 100%;
  background-color: var(--color-surface-primary);
  border: 1px solid var(--color-grey-soft);
  border-radius: map.get($radius, 'md');
  cursor: pointer;
  overflow: hidden;

  @include transition(border-color);

  &:hover {
    border-color: var(--color-grey-neutral);
  }

  &.open {
    border-color: var(--color-semantic-border-accent);
  }

  // Size: Regular (38px height)
  &.regular {
    height: 38px;
    padding: map.get($spacing-scale, 's-2h') map.get($spacing-scale, 's-2h') map.get($spacing-scale, 's-2h') map.get($spacing-scale, 's-3');
  }

  // Size: Large (52px height)
  &.large {
    height: 52px;
    padding: map.get($spacing-scale, 'md') map.get($spacing-scale, 's-3');
  }
}

.filterIcon {
  flex-shrink: 0;
  color: var(--color-text-primary);
}

.label {
  text-align: left;
  white-space: nowrap;
  color: var(--color-text-primary);

  @include body-small-regular;
}

.arrowIcon {
  flex-shrink: 0;
  color: var(--color-grey-dark);
}

.badge {
  position: absolute;
  top: -5px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: var(--color-semantic-border-accent);
  border-radius: map.get($radius, 'rounded');
  color: var(--color-text-primary);

  @include metadata-small-medium;
}

.dropdown {
  position: absolute;
  left: 0;
  z-index: 100;
  min-width: 200px;
  width: 300px;
  max-width: 300px;
}

// Dropdown position for Regular size (38px trigger + 5px gap = 43px)
.dropdownRegular {
  top: 43px;
}

// Dropdown position for Large size (52px trigger + 5px gap = 57px)
.dropdownLarge {
  top: 57px;
}