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

.currency-input-panel {
  @extend %col-nowrap;
  box-shadow: 0 4px 8px 0 rgba($royal-blue, 0.1);
  position: relative;
  border-radius: 1.25rem;
  z-index: 200;

  &__container {
    border-radius: 1.25rem;
    box-shadow: 0 0 0 .5px $mercury-gray;
    background-color: $white;
    transition: box-shadow 200ms ease-in-out;

    &--error {
      box-shadow: 0 0 0 .5px $salmon-red;
    }

    &:focus-within {
      box-shadow: 0 0 .5px .5px $malibu-blue;
    }

    &--error:focus-within {
      box-shadow: 0 0 .5px .5px $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 {
    font-size: 1.5rem;
    @extend %borderless-input;
    &--error {
      color: $salmon-red;
    }

    &[type='number'] {
        -moz-appearance:textfield;
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
  }

  &__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);
      }
    }

    &--disabled {
      .currency-input-panel__dropdown-icon {
        opacity: 0;
      }
    }
  }

  &__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;
    outline: none;
    cursor: pointer;
    user-select: none;

    &--pending {
      line-height: .9;
      .loader {
        height: .5rem;
        width: .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;
    border-radius: 1rem;
    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 {
    -webkit-overflow-scrolling: touch;
    height: 17.5rem;
    overflow-y: auto;
  }

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

    &--selected {
      background-color: $concrete-gray;
      box-sizing: border-box;
      border: 1px solid $mercury-gray;
      border-radius: 2.5rem;

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

    &--searching {
      justify-content: center;
      .loader {
        margin-right: 1rem;
      }
    }

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

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

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

    &--no-exchange {
      color: $dove-gray;
      justify-content: center;
      background-color: darken($concrete-gray, 1);
    }

    &--create-exchange {
      color: $white;
      justify-content: center;
      background-color: $malibu-blue;
      &:hover {
        background-color: lighten($malibu-blue, 1)
      }

      &:active {
        background-color: darken($malibu-blue, 1);
      }
    }
  }

  &__token-logo {
    object-fit: contain;
    border-radius: 1rem;
  }

  &__token-label {
    color: $dove-gray;
  }

  @media only screen and (min-width : 768px) {
    max-width: 560px;
    max-height: 768px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1rem;
    padding-bottom: 1rem;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin-top: 4rem;
  }
}


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

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