.iti {
  position: relative;
  z-index: 20;

  .iti__country-container {
    display: contents;

    .iti__selected-country {
      position: absolute;
      top: 26px;
      left: 0;
      padding: 0 var(--spacing-6) 0 var(--spacing-8);
      transform: translateY(-50%);
      height: var(--spacing-14);
      margin-right: 5rem;
      border-right: 1px solid rgb(0 0 0 / 30%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      font-size: var(--text-m);

      .iti__flag {
        display: none;
      }
    }

    .iti__dropdown-content.iti__hide {
      transform: translateY(5px);
      opacity: 0;
      pointer-events: none;
    }

    .iti__dropdown-content {
      position: absolute;
      width: 100% !important;
      top: 100%;
      left: 0;
      padding: 0.5rem;
      margin-top: 0.7rem;
      background-color: #fff;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
      border: 1px solid #e1e1e1;
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
      transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;

      .iti__country-list {
        max-height: 200px;
        width: 100% !important;
        overflow-y: scroll;
        list-style: none;
        margin: 0;
        margin-top: 0.5rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;

        .iti__country {
          padding: 0.8rem 1rem;
          cursor: pointer;
          font-size: var(--text-m);

          &:hover {
            background-color: #f5f5f5;
          }
        }
      }

      .iti__search-input {
        border: none;
        outline: none;
        border-bottom: 1px solid var(--primary-color);
      }
    }

    .iti__a11y-text,
    .iti__divider {
      display: none;
    }
    .iti__dial-code {
      background-color: var(--primary-color);
      font-size: var(--text-s);
      margin-left: 0.5rem;
      padding: 2px 2px 0px;
      color: var(--bg-color);
    }
  }

  .iti__country-list::-webkit-scrollbar {
    width: 0.5rem;
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
}

@media (max-width: 767px) {
  .iti {
    .iti__country-container {
      .iti__dropdown-content.iti__hide {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
      }
      .iti__dropdown-content {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: 20;
        width: 100%;
        min-height: 250px;
        box-shadow: 0 0 0 50pc rgba(0, 0, 0, 0.1);
        border-radius: 1rem 1rem 0 0;
      }
    }
  }
}