@import '../style/mixins';
@import '../style/colors';

.transfer-page {
  overflow-y: auto;

  .transfer-box {
    border-radius: 4px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
    margin: 50px auto 0 auto;
    width: 540px;

    .transfer-box-header {
      align-items: center;
      display: flex;
      padding: 15px 27px;

      @include themify(day) {
        border-bottom: 1px solid $white-four;
      }

      @include themify(night) {
        border-bottom: 1px solid $dusky-blue-two;
      }

      .step-no {
        color: $silver;
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 48px;
        font-weight: 700;
        margin-right: 8px;
      }

      .box-titles {
        flex-grow: 1;
        .main-title {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 4px;

          @include themify(day) {
            color: $charcoal-grey;
          }

          @include themify(night) {
            color: $pinkish-grey;
          }
        }

        .sub-title {
          font-weight: 300;

          @include themify(day) {
            color: $steel-grey;
          }

          @include themify(night) {
            color: $metallic-blue;
          }
        }
      }
    }

    .transfer-box-body {
      border-top: 1px solid transparent;
      padding: 24px 32px;
      margin-bottom: 40px;

      .transfer-alert {
        margin-bottom: 20px;
      }

      .transfer-form {
        .balance {
          font-weight: 300;
          margin: 12px 0 24px 100px;
          cursor: pointer;

          @include themify(day) {
            color: $charcoal-grey;
          }

          @include themify(night) {
            color: $pinkish-grey;
          }

          .balance-num {
            color: $dark-sky-blue;
          }
        }

        .form-item {
          align-items: baseline;
          display: flex;
          margin-bottom: 16px;

          .form-label {
            flex-grow: 0;
            flex-shrink: 0;
            width: 100px;

            @include themify(day) {
              color: $steel-grey;
            }

            @include themify(night) {
              color: $silver;
            }
          }

          .form-input {
            flex-grow: 1;

            .input-help {
              font-weight: 300;
              margin: 12px 0;

              @include themify(day) {
                color: $charcoal-grey;
              }

              @include themify(night) {
                color: $pinkish-grey;
              }
            }
          }

          &.has-error {
            .form-input {
              input[type='text'] {
                border-color: $red2;
              }

              .input-help {
                color: $red2;
              }
            }
          }

          .select-from {
            width: 100%;
          }

          &.item-amount {
            .txt-amount {
              width: 200px;
            }

            .asset-switch {
              flex-grow: 1;

              .asset {
                border-radius: 25px;
                padding: 3px 6px;

                @include themify(day) {
                  color: $steel-grey;
                }

                @include themify(night) {
                  color: $silver;
                }

                &:not(:last-child) {
                  margin-right: 8px;
                }

                &.selected {
                  background-color: $silver;

                  @include themify(day) {
                    color: $white;
                  }

                  @include themify(night) {
                    color: $dark;
                  }
                }
              }
            }
          }
        }

        .form-controls {
          align-items: center;

          display: flex;
          justify-content: center;

          .btn-back {
            color: $silver;
            margin-right: 10px;
            &:hover {
              color: $charcoal-grey;
            }
          }
        }
      }

      .confirmation {
        margin-bottom: 30px;

        .users {
          display: flex;
          justify-content: space-around;
          margin-bottom: 20px;

          .from-user,
          .to-user,
          .arrow {
            height: 100px;
            width: 100px;
          }

          .from-user,
          .to-user {
            cursor: pointer;
            .user-avatar {
              height: 100%;
              width: 100%;
            }
          }

          .arrow {
            align-items: center;
            color: $silver;
            display: flex;
            justify-content: center;
            opacity: 0.4;

            svg {
              height: 60px;
              width: 60px;
            }
          }
        }

        .amount {
          color: $dark-sky-blue;
          font-size: 22px;
          font-weight: 500;
          margin-bottom: 30px;
          text-align: center;
        }

        .memo {
          color: $warm-grey;
          font-size: 16px;
          text-align: center;
          word-break: break-all;
        }
      }

      .success {
        font-size: 16px;
        margin-bottom: 30px;
        text-align: center;

        @include themify(day) {
          color: $charcoal-grey;
        }

        @include themify(night) {
          color: $pinkish-grey;
        }

        .amount {
          color: $dark-sky-blue;
        }

        .from-user,
        .to-user {
          font-weight: 700;
        }
      }
    }

    &.in-progress {
      .transfer-box-body {
        border-top: none;
      }
    }
  }
}
