.enquiry-tag {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  display: flex;
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 4px 10px;
  border-radius: 40px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  gap: 4px;
  background-color: var(--color-gray-200);
  color: var(--color-gray-900);

  .material-symbols-outlined, .icon {
    color: var(--color-gray-400);
  }

  &.gray {
    background-color: var(--color-gray-75);
    color: var(--color-gray-700);

    .material-symbols-outlined, .icon {
      color: var(--color-gray-500);
    }
  }

  &.dark-gray {
    background-color: var(--color-gray-700);
    color: var(--color-white);

    .material-symbols-outlined, .icon {
      color: var(--color-gray-500);
    }
  }

  &.green {
    background-color: var(--color-green-50);
    color: var(--color-green-700);

    .material-symbols-outlined, .icon {
      color: var(--color-green-500);
    }
  }

  &.yellow {
    background-color: var(--color-yellow-50);
    color: var(--color-yellow-800);

    .material-symbols-outlined, .icon {
      color: var(--color-yellow-500);
    }
  }

  &.orange {
    background-color: var(--color-orange-50);
    color: var(--color-orange-700);

    .material-symbols-outlined, .icon {
      color: var(--color-yellow-500);
    }
  }

  &.red {
    background-color: var(--color-red-50);
    color: var(--color-red-700);

    .material-symbols-outlined, .icon {
      color: var(--color-red-500);
    }
  }

  &.violet {
    background-color: var(--color-violet-50);
    color: var(--color-violet-700);

    .material-symbols-outlined, .icon {
      color: var(--color-violet-500);
    }
  }

  &.turquoise {
    background-color: var(--color-turquoise-50);
    color: var(--color-turquoise-700);

    .material-symbols-outlined, .icon {
      color: var(--color-turquoise-500);
    }
  }

  &.blue {
    background-color: var(--color-blue-100);
    color: var(--color-blue-700);

    .material-symbols-outlined, .icon {
      color: var(--color-blue-500);
    }
  }

  &.small {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    height: 20px;
    letter-spacing: 0.2px;
  }

  &.small-square {
    padding: 0 4px;
    border-radius: 4px;
  }
}

.enquiry-tag__min-width-90,
.enquiry-tag__min-width-100 {
  display: flex;
  justify-content: start;
}

.enquiry-tag__min-width-90 {
  min-width: 90px;
}

.enquiry-tag__min-width-100 {
  min-width: 100px;
}

/* gray */
.enquiry-tag--gray {
  background-color: var(--color-gray-75);
  color: var(--color-gray-700);
}

.enquiry-tag--gray .material-symbols-outlined {
  color: var(--color-gray-500);
}

.enquiry-tag--dark-gray {
  background-color: var(--color-gray-700);
  color: var(--color-white);
}

/* green */
.enquiry-tag--green {
  background-color: var(--color-green-50);
  color: var(--color-green-700);
}

.enquiry-tag--green .material-symbols-outlined {
  color: var(--color-green-500);
}

/* yellow */
.enquiry-tag--yellow {
  background-color: var(--color-yellow-50);
  color: var(--color-yellow-800);
}

.enquiry-tag--yellow .material-symbols-outlined {
  color: var(--color-yellow-500);
}

/* orange */
.enquiry-tag--orange {
  background-color: var(--color-orange-50);
  color: var(--color-orange-700);
}

.enquiry-tag--orange .material-symbols-outlined {
  color: var(--color-orange-500);
}

/* red */
.enquiry-tag--red {
  background-color: var(--color-red-50);
  color: var(--color-red-700);
}

.enquiry-tag--red .material-symbols-outlined {
  color: var(--color-red-500);
}

/* violet */
.enquiry-tag--violet {
  background-color: var(--color-violet-50);
  color: var(--color-violet-700);
}

.enquiry-tag--violet .material-symbols-outlined {
  color: var(--color-violet-500);
}

/* turquoise */
.enquiry-tag--turquoise {
  background-color: var(--color-turquoise-50);
  color: var(--color-turquoise-700);
}

.enquiry-tag--turquoise .material-symbols-outlined {
  color: var(--color-turquoise-500);
}

/* blue */
.enquiry-tag--blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}

.enquiry-tag--blue .material-symbols-outlined {
  color: var(--color-blue-500);
}

.enquiry-tag.small {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  height: 20px;
  letter-spacing: 0.2px;
}

.enquiry-tag.small-square {
  padding: 0 4px;
  border-radius: 4px;
}