.dropdown-component {
  position: relative;

  input.input {
    width: 100%;
    padding: 6px 42px 6px 10px;
    gap: 16px;
    border: 1px solid #bababa;
    background: var(--Color-Neutral-white, #fff);
  }

  .icon {
    position: absolute;
    right: 10px;
    top: calc(14px - 8px);
  }

  .dropdown-popper {
    position: absolute;
    display: none;
  }

  .dropdown-popper.active {
    display: block;
    width: 100%;
    margin-top: 8px;
    z-index: 999;

    .list {
      display: flex;
      width: 100%;
      padding: 6px 10px;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 12px;
      border: 1px solid #bababa;
      background: var(--Color-Neutral-white, #fff);

      .dropdown-item {
        color: var(--Black, #212529);
        font-family: Montserrat;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 21px */
        padding: 0px;
        cursor: pointer;
      }

      .dropdown-item:hover {
        background: white;
      }
    }
  }
}

.dropdown-component:has(.dropdown-popper.active) {
  .icon svg {
    transform: rotate(180deg);
  }
}