@use '../../scss/base/mixins' as *;
@use '../../scss/base/variables' as var;

.filterContainer {
  background-color: var(--white);
  font-size: var(--font-size-12);
  border: var(--medium-purple) solid 1px;
  font-weight: var(--font-weight-regular);
  color: var(--dark-purple);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  overflow: hidden;
  // The design needs to have the max width be 300px in desktop
  max-width: 300px;
  border-radius: 4px;
  @media only screen and (max-width: var.$breakpoint-md) {
    // The design needs to have the max width be 240px in mobile
    max-width: 240px;
  }

  // When no items are selected, make the clickable button fill the full
  // width so the hit target isn't limited to the placeholder text length.
  // When active (items selected), the button shares space with the clear
  // button so we don't apply flex: 1.
  &:not(.active) > button {
    flex: 1;
    min-width: 0;
  }

  &:not(.disabled):hover {
    box-shadow: 0px 2px 2px 0 var(--button-shadow-color);
  }
}

.disabled {
  cursor: default;
}

.active {
  background-color: var(--light-blue);
  border: var(--dark-blue) solid 1px;
}

.clearButton {
  background-color: var(--white);
  color: var(--black);
  border-radius: 9999px;
  padding: 4px;
  transition: background-color 0.2s;
  font-size: var(--font-size-12);
  margin-right: 8px;

  &:hover {
    background-color: var(--medium-blue);
  }
}

.optionContainer {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  flex-shrink: 1;
  overflow: hidden;
}

.optionContainerWithMaxWidth {
  max-width: 120px;
}

.optionName {
  display: inline-block;
  background-color: var(--medium-blue);
  padding: 4px 8px;
  border-radius: 16px;
  white-space: nowrap;
}

.moreIndicator {
  background-color: var(--medium-blue);
  padding: 4px 8px;
  border-radius: 16px;
}

.fontStyled {
  font-weight: var(--font-weight-semibold);
  padding: 4px;
}

.fontNotSelected {
  margin-right: 4px;
}

.textPurple {
  color: var(--purple);
}

.selectContainer {
  min-width: 240px;
}

/* This is needed so that the +X indicator is visible even if labelName is too long,
calculated after deducting padding and width for +X & clear button */
.filterContainer .labelContainer {
  max-width: 188px;
  @media only screen and (max-width: var.$breakpoint-md) {
    max-width: 128px;
  }
}

.flexContainer {
  display: flex;
  align-items: center;
  padding: 8px;
  height: 40px;
  box-sizing: border-box;

  &.withClearButton {
    padding-right: 0;
  }
}