.combo-box {
  position: relative;
  height: max-content;

  .Combo-inputbox {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    &::after {
      content: "\f030";
      font-family: 'mastorsIcons' !important;
      position: absolute;
      right: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      aspect-ratio: 1;
      transition: transform 0.3s ease;
    }
    &.open::after {
      transform: translateY(-50%) rotate(180deg);
    }

    .combo-input {
      width: 100%;
      position: relative;
      font-size: 0.95rem;
      color: #3e3e3e;
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      transition: transform 0.3s ease;

      &::placeholder {
        color: #363636;
      }
    }
  }

  .combo-options {
    display: none;
    position: absolute;
    top: 40px;
    width: 100%;
    max-height: 10rem;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 4px 8px #00000033;
    z-index: 10;
    list-style-type: none;
    padding: 0;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: #c7c7c7 #f1f1f1;

    & .combo-option {
      padding-left: 1rem;
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      color: #363636;
      font-size: 1.05rem;
      cursor: pointer;

      &:hover {
        color: #fff;
        background-color: #1967d2;
      }
    }
    & .no-data {
      padding: 0.7rem;
    }

    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background-color: #f1f1f1;
      border-radius: 4px;
    }

    &::-ms-scrollbar {
      width: 8px;
      color: #888;
    }
  }
}