@import '../../variables.scss';

.currency-input-panel {
  @extend %col-nowrap;

  &__container {
    position: relative;
    z-index: 200;
    border-radius: 1.25rem;
    border: 0.5px solid $mercury-gray;
    background-color: $white;
    box-shadow: 0px 4px 4px 2px rgba($royal-blue, 0.05);

    &--error {
      border: 0.5px solid $salmon-red;
    }

    &:focus-within {
      border-color: $royal-blue;
    }

    &--error:focus-within {
      border-color: $salmon-red;
    }
  }

  &__label-row {
    @extend %row-nowrap;
    align-items: center;
    color: $dove-gray;
    font-size: .75rem;
    line-height: 1rem;
    padding: .75rem 1rem;
  }

  &__label-container {
    flex: 1 1 auto;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__label-description {
    opacity: .75;
    margin-left: .25rem;
  }

  &__input-row {
    @extend %row-nowrap;
    align-items: center;
    padding: .25rem .85rem .75rem;
  }

  &__input {
    @extend %borderless-input;
    &--error {
      color: $salmon-red;
    }
  }

  &__extra-text {
    &--error {
      color: $salmon-red;
    }
  }

  &__currency-select {
    @extend %row-nowrap;
    align-items: center;
    font-size: 1rem;
    color: $royal-blue;
    height: 2rem;
    padding: 0 1rem;
    border: 1px solid $royal-blue;
    border-radius: 2.5rem;
    background-color: $zumthor-blue;
    outline: none;
    cursor: pointer;
    user-select: none;

    &:active {
      background-color: rgba($zumthor-blue, .8);
    }

    &--selected {
      background-color: $concrete-gray;
      border-color: $mercury-gray;
      color: $black;
      padding: 0 .5rem;

      .currency-input-panel__dropdown-icon {
        background-image: url(../../assets/images/dropdown.svg);
      }
    }
  }

  &__sub-currency-select {
    @extend %row-nowrap;
    line-height: 0;
    background: $zumthor-blue;
    border: 1px solid $royal-blue;
    color: $royal-blue;
    height: 2rem;
    padding: 10px 50px 10px 10px;
    margin-right: -40px;
    border-radius: 2.5rem;
  }

  &__dropdown-icon {
    height: 1rem;
    width: .75rem;
    margin-left: .7rem;
    background-image: url(../../assets/images/dropdown-blue.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
  }

  &__selected-token-logo {
    margin-right: .4rem;
    object-fit: contain;
  }
}


.token-modal {
  background-color: $white;
  position: relative;
  bottom: 21rem;
  width: 100%;
  height: 21rem;
  z-index: 2000;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  transition: 250ms ease-in-out;

  &__search-container {
    @extend %row-nowrap;
    padding: 1rem;
    border-bottom: 1px solid $mercury-gray;
  }

  &__search-input {
    @extend %borderless-input;
  }

  &__search-icon {
    margin-right: .2rem;
  }

  &__token-list {
    height: 17.5rem;
    overflow-y: auto;
  }

  &__token-row {
    @extend %row-nowrap;
    align-items: center;
    padding: 1rem 1.5rem;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;

    &--selected {
      background: $mercury-gray;

      .token-modal__token-label {
        color: $black;
      }
    }

    &:hover {
      background-color: $concrete-gray;

      .token-modal__token-label {
        color: $black;
      }
    }

    &:active {
      background-color: darken($concrete-gray, 1);
    }
  }

  &__token-logo {
    object-fit: contain;
  }

  &__token-label {
    color: $silver-gray;
    font-weight: 200;
  }
}


.token-modal-appear {
  bottom: 0;
}

.token-modal-appear.modal-container-appear-active {
  bottom: 0;
}


