.search-bar {
  width: 100%;
  height: var(--spacing-10);
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

/* Plain -> Only bottom border */
.search-bar.plain {
  box-shadow: inset 0 -1px 0 var(--gray-400);
}

/* Fixed -> Border */
.search-bar.fixed {
  border-radius: var(--radius-lg);
  border: var(--border-width-thin) var(--border-style-solid) var(--gray-400);
  padding: var(--spacing-3) var(--spacing-5);
}

/* Fixed -> Background on hover */
.search-bar.fixed:hover {
  background-color: var(--primary-50);
}

/* Dynamic -> With border radius and padding */
.search-bar.dynamic {
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
}

/* Dynamic -> Background on hover */
.search-bar.dynamic:hover {
  background-color: var(--primary-100);
}

/* Dynamic -> Only line on the bottom with no border radius on user input not focused */
.search-bar.dynamic:has(input:not(:placeholder-shown):not(:focus)) {
  box-shadow: inset 0 -1px 0 var(--gray-500);
  border-radius: 0;
}

/* Outlined -> Outline with no background on focus */
.search-bar.outlined:has(input:focus) {
  outline: var(--border-width-medium) var(--border-style-solid) var(--blue-300);
  background: none;
}

/* Outlined -> Close button with padding */
.search-bar.outlined .search-bar__close_btn {
  right: var(--spacing-4);
}

/* Expandable -> Search bar small on non user input */
.search-bar.expandable:has(input:placeholder-shown) {
  width: fit-content;
  border: none;
}

/* Expandable -> Search bar input small on non user input */
.search-bar.expandable input:placeholder-shown {
  width: 50px;
}

/* Expandable -> Search bar full on focus */
.search-bar.expandable:has(input:focus) {
  width: 100%;

  input {
    width: 100%;
  }
}

.search-bar input {
  width: 100%;
  background: none;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  padding-left: var(--spacing-2);
}

.search-bar__search-icon {
  display: inline-block;
  will-change: transform;
  transition: transform 0.3s ease;
}

.search-bar:has(input:focus) .search-bar__search-icon {
  transform: scaleX(1);
  transition: transform 0.3s ease;
}

.search-bar:hover .search-bar__search-icon {
  transform: scaleX(-1);
}

.search-bar input::placeholder {
  color: var(--gray-900);
  will-change: color;
  transition: color 0.3s ease;
}

.search-bar input:focus::placeholder {
  color: var(--gray-400);
}

.search-bar__close_btn {
  border: none;
  background: none;
  outline: none;
  position: absolute;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Shows close button only on user input */
.search-bar:has(input:not(:placeholder-shown)) .search-bar__close_btn {
  opacity: 1;
  cursor: pointer;
}

@media (max-width: 767px) {
  .search-bar{
    border: var(--border-width-thin) var(--border-style-solid) var(--gray-400);
    box-shadow: none;
    border-radius: var(--spacing-4);
    padding: var(--spacing-1) var(--spacing-3);
  }
}