@use "../../styles/colors" as colors;
@use "../../styles/variables" as vars;
@use "../../styles/fonts" as fonts;

.city-autocomplete-popup {
  position: absolute;
  width: 630px;
  background: colors.$white;
  border-radius: vars.$border-radius;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  margin-top: vars.$space-s2;

  .tabs {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid colors.$border-input;

    .tab-button {
      flex-grow: 1;
      padding: vars.$space-m;
      background-color: colors.$blue-extra-light;
      border: none;
      border-right: 1px solid colors.$border-input;
      color: colors.$blue;
      font-weight: fonts.$font-bold;
      font-size: fonts.$font-size-m;
      cursor: pointer;

      &:last-child { border-right: none; }

      &.active {
        background-color: colors.$white;
        color: colors.$text-color;
      }

      &:hover {
        background-color: colors.$blue-extra-light;
      }
    }
  }

  .content {
    padding: vars.$space-m2 16px;

    .content--scroll-panel {
      max-height: 350px;
      overflow-y: auto;
    }

    .row {
      display: flex;
      align-items: flex-start;
      padding: 4px 0;

      &.country-start-row {
        border-top: 1px solid colors.$border-input;
        padding-top: vars.$space-m2;
        margin-top: vars.$space-s2;

        &:first-child {
          border-top: none;
          padding-top: 0;
          margin-top: 0;
        }
      }
    }

    .cell {
      &.contry {
        width: 30%;
        font-weight: fonts.$font-bold;
        padding: 7.5px;
      }

      &.city {
        flex: 1;
        padding-right: 16px;

        .city--item {
          display: inline-block;
          padding: vars.$space-s2;
          cursor: pointer;
          border-radius: vars.$border-radius;
          transition-duration: 0.2s;

          &:hover { background-color: colors.$blue-extra-light; }
        }

        &.city-active .city--item {
          background-color: colors.$blue-icon;
        }

        &.city-highlighted .city--item,
        .city--item-highlighted {
          background-color: colors.$blue-extra-light;
          outline: 2px solid colors.$blue;
        }

        .airports-column {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: vars.$space-s2;

          .city--item {
            color: colors.$light-gray;
          }
        }
      }
    }
  }

  .city-autocomplete-popup-footer {
    background: colors.$blue-extra-light;
    border-top: 1px solid colors.$border-input;

    .gps-contaner {
      padding: 16px;

      .gps-button {
        height: 40px;
        width: 100%;
        background-color: colors.$blue-light;
        color: colors.$white;
        border: none;
        border-radius: vars.$border-radius;
        font-size: fonts.$font-size-m;
        cursor: pointer;

        &:hover { background-color: colors.$blue-light--hover; }
      }
    }
  }
}
