/* :root {
    --bg-color: hsl(223, 6.7%, 20.6%);
    --bg-color-dark: hsl(225, 6.3%, 12.5%);
    --foreground-color: hsl(210, 9.1%, 87%);
    --foreground-color-dark: hsl(214, 8.1%, 61.2%);
    --outline-color: hsl(200, 100%, 50%);
  }
  
  body {
    background-color: var(--bg-color);
    color: var(--foreground-color);
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
  }
  
  .row {
    display: flex;
    gap: 1rem;
    margin: 1rem;
    margin-top: 2rem;
  } */

.box {
  background-color: var(--bs-body-bg);
  width: 100%;
}

.searchInput {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: var(--bs-border-width) solid var(--bs-border-color);
  width: 100%;
  transition: width 1s;
  outline: none;
  border-radius: var(--bs-border-radius);
  padding: 0.375em;
  font-size: var(--bs-body-font-size);
}

.radioWrapper {
  width: 100px;
}

@media (prefers-reduced-motion: reduce) {
  .input {
    transition: none;
  }
}

.searchInput::placeholder {
  color: var(--bs-secondary-text-emphasis);
}

.searchInput:focus-visible,
.searchButton:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--bs-primary-border-subtle);
}
/*   
  .input:focus,
  .input:not(:placeholder-shown) {
    width: 15em;
  } */

.searchWrapper {
  position: relative;
}

.searchWrapperFrom {
  position: relative;
}

.searchIcon,
.xIcon {
  position: absolute;
  width: 1rem;
  height: 1rem;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--bs-secondary-text-emphasis);
  opacity: 0;
  rotate: 90deg;
  pointer-events: none;
  visibility: hidden;
  border-radius: 0.25rem;
  transition-behavior: discrete;
  transition-property: opacity, rotate, visibility;
  transition-duration: 0.5s;
}

.searchWrapper:has(.searchInput:placeholder-shown) .searchIcon,
.searchWrapper:has(.searchInput:not(:placeholder-shown)) .xIcon {
  opacity: 1;
  pointer-events: all;
  rotate: 0deg;
  visibility: visible;
}

.searchWrapperFrom[aria-describedby="popover-positioned-top"] > div > .dropDownIcon {
  rotate: 180deg !important;
}

.searchWrapper:has(button) button {
  all: unset;
  cursor: pointer;
  position: absolute;
  width: 1rem;
  height: 1rem;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
}

/* clears the ‘X’ from Internet Explorer */
.searchInput[type="search"]::-ms-clear,
.searchInput[type="search"]::-ms-reveal {
  appearance: none;
  width: 0;
  height: 0;
}

/* clears the ‘X’ from Chrome */
.searchInput[type="search"]::-webkit-search-decoration,
.searchInput[type="search"]::-webkit-search-cancel-button,
.searchInput[type="search"]::-webkit-search-results-button,
.searchInput[type="search"]::-webkit-search-results-decoration {
  appearance: none;
}
