@import './send-content/send-gas-row/send-gas-row';

.send {
  &__header {
    position: relative;
    display: flex;
    justify-content: center;
    background-color: $Grey-000;
    border-bottom: none;
    padding: 14px 0 3px 0;

    .page-container__title {
      @include H4;

      text-align: center;
    }

    .page-container__header-close-text {
      @include H5;

      position: absolute;
      right: 1rem;
      width: min-content;
      font-size: 0.75rem;
      white-space: nowrap;
    }
  }

  &__dialog {
    margin: 1rem;
    cursor: pointer;
  }

  &__error-dialog {
    margin: 1rem;
  }

  &__to-row {
    margin: 0;
    padding: 0.5rem;
    flex: 0 0 auto;
    background-color: $Grey-000;
    border-bottom: 1px solid $alto;
  }

  &__select-recipient-wrapper {
    @extend %col-nowrap;

    flex: 1 1 auto;
    height: 0;

    &__list {
      overflow-y: auto;

      &__link {
        @include Paragraph;

        @extend %row-nowrap;

        padding: 1rem;
        border-bottom: 1px solid $alto;
        border-radius: 0;
        align-items: center;
        justify-content: flex-start;
      }

      &__back-caret {
        @extend %bg-contain;

        display: block;
        background-image: url('/images/caret-left.svg');
        width: 18px;
        height: 18px;
        margin-right: 0.5rem;

        [dir='rtl'] & {
          transform: rotate(180deg);
        }
      }
    }

    &__recent-group-wrapper {
      @extend %col-nowrap;

      &__load-more {
        @include H7;

        padding: 0.5rem;
        text-align: center;
        border-bottom: 1px solid $alto;
        justify-content: flex-start;
      }
    }

    &__group {
      @extend %col-nowrap;
    }

    &__group-label {
      @include H8;

      background-color: $Grey-000;
      color: $Grey-600;
      padding: 0.5rem 1rem;
      border-bottom: 1px solid $alto;

      &:first-of-type {
        border-top: 1px solid $alto;
      }
    }

    &__group-item,
    &__group-item--selected {
      @extend %row-nowrap;

      padding: 0.75rem 1rem;
      align-items: center;
      border-bottom: 1px solid $alto;
      cursor: pointer;

      &:hover {
        background-color: rgba($alto, 0.2);
      }

      .identicon {
        margin-right: 1rem;
        flex: 0 0 auto;
      }

      &__content {
        @extend %col-nowrap;

        flex: 1 1 auto;
        width: 0;
      }

      &__title {
        @include H6;

        max-width: 20em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: $black;
      }

      &__subtitle {
        @include H8;

        color: $Grey-500;
      }
    }

    &__group-item--selected {
      border: 2px solid #2b7cd6;
      border-radius: 8px;
    }
  }
}

.ens-input {
  @extend %row-nowrap;

  &__wrapper {
    @extend %row-nowrap;

    flex: 1 1 auto;
    width: 0;
    align-items: center;
    background: $white;
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid $Grey-100;
    transition: border-color 150ms ease-in-out;

    &:focus-within {
      border-color: $Grey-500;
    }

    &__status-icon {
      @extend %bg-contain;

      background-image: url('/images/search-black.svg');
      width: 1.125rem;
      height: 1.125rem;
      margin: 0.25rem 0.5rem 0.25rem 0.25rem;

      &--valid {
        background-image: url('/images/check-green-solid.svg');
      }
    }

    &__input {
      @include H6;

      flex: 1 1 auto;
      width: 0;
      border: 0;
      outline: none;

      &::placeholder {
        color: $Grey-200;
      }
    }

    &__action-icon {
      @extend %bg-contain;

      cursor: pointer;

      &--erase {
        background-image: url('/images/close-gray.svg');
        background-color: unset;
        width: 0.75rem;
        height: 0.75rem;
        margin: 0 0.25rem;
      }

      &--qrcode {
        background-image: url('/images/qr-blue.svg');
        background-color: unset;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0 0.25rem;
      }
    }

    &--valid {
      border-color: $Blue-500;

      .ens-input__wrapper {
        &__status-icon {
          background-image: url('/images/check-green-solid.svg');
        }

        &__input {
          @extend %col-nowrap;

          @include H7;

          color: $Blue-500;
        }
      }
    }
  }

  &__selected-input {
    &__title {
      @include H6;

      @extend %ellipsify;

      word-wrap: break-word;
      white-space: inherit !important;
    }

    &__subtitle {
      @include H7;

      color: $Grey-500;
      margin-top: 0.25rem;
    }
  }
}