@import 'common/sass/variables';
@import 'common/sass/variables/colors';
@import 'common/sass/variables/spacing';

.AddressFieldDropdown {
  position: absolute;
  top: calc(100% - #{$space});
  width: 100%;
  border: 1px solid color(gray-lighter);
  border-top: none;
  background: color(component-active-color);
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-shadow: $tab-box-shadow;
  text-align: center;

  &-dropdown-item {
    margin: 0;
    padding: $space-md $space;
    display: flex;
    align-items: center;

    &:hover {
      cursor: pointer;
      background: color(gray-lightest);
    }

    &-identicon {
      width: 40px;
      height: 40px;
      margin-right: $space-sm;

      .Identicon {
        width: 40px !important;
        height: 40px !important;
      }

      @media (max-width: 380px) {
        display: none;
      }
    }

    &-label,
    &-address {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-label {
      flex: 1 0 0;
    }

    &-address {
      flex: 3 0 0;
    }

    &-no-match {
      word-break: break-word;

      &:hover {
        cursor: not-allowed;
        background: inherit;
      }

      i {
        margin-right: $space-sm;
      }
    }

    &--active {
      background: color(gray-lighter);
    }
  }
}