app-wallet {

  @include themify($themes) {
    color: themed(mainTextColor);
  }

  .header {

    button {

      @include themify($themes) {
        color: themed(mainTextColor);
      }

      .icon {

        @include themify($themes) {
          background-color: themed(blueTextColor);
        }
      }
    }

    .alias {

      .icon {

        @include themify($themes) {
          background-color: themed(blueTextColor);
        }
      }
    }
  }

  .address {

    @include themify($themes) {
      color: themed(blueTextColor);
    }

    .icon {

      @include themify($themes) {
        background-color: themed(blueTextColor);
      }
    }
  }

  .tabs {

    .tabs-header {

      .tab {

        @include themify($themes) {
          background-color: themed(tabInactiveBackgroundColor);
        }

        .icon {

          @include themify($themes) {
            background-color: themed(blueTextColor);
          }
        }

        .indicator {

          @include themify($themes) {
            background-color: themed(accountIndicatorBackgroundColor);
            color: themed(accountIndicatorTextColor);
          }
        }

        &.active {

          @include themify($themes) {
            background-color: themed(contentBackgroundColor);
          }
        }

        &:hover:not(.active):not(.disabled) {

          @include themify($themes) {
            background-color: themed(tabHoverBackgroundColor);
          }
        }
      }
    }

    .tabs-content {

      @include themify($themes) {
        background-color: themed(contentBackgroundColor);
      }
    }

    .pagination-wrapper {

      @include themify($themes) {
        background-color: themed(contentBackgroundColor);
      }

      .pagination {

        @include themify($themes) {
          border-top: 0.2rem solid themed(transparentButtonBorderColor);
        }
  
        button {
          @include themify($themes) {
            background-color: themed(transparentButtonBorderColor);
            color: themed(mainTextColor);
          }
  
          &.active {
            @include themify($themes) {
              background-color: themed(tableBackgroundColor);
              color: themed(mainTextColor);
            }
          }
  
          &:hover {
            @include themify($themes) {
              background-color: themed(hoverPage);
              color: themed(mainTextColor);
            } 
          }
        }
      }
    }
  }
}

app-send {

  .form-send {

    .send-select {

      @include themify($themes) {
        color: themed(mainTextColor);
      }

      .icon {

        @include themify($themes) {
          background-color: themed(blueTextColor);
        }
      }
    }

    .additional-details {

      @include themify($themes) {
        border: 0.2rem solid themed(transparentButtonBorderColor);
      }
    }
  }
}

app-receive {

  .btn-copy-address {

    @include themify($themes) {
      background-color: themed(blueTextColor);
    }
  }
}

app-history {

  table {

    tbody {

      tr {

        &.locked-transaction {

          @include themify($themes) {
            color: themed(optionalTextColor);
          }
        }

        &:nth-child(4n+1) {

          @include themify($themes) {
            background-color: themed(tableBackgroundColor);
          }
        }

        &:nth-child(4n+2) {

          @include themify($themes) {
            background-color: themed(tableBackgroundColor);
          }
        }

        &:nth-child(4n+3) {

          @include themify($themes) {
            background-color: transparent;
          }
        }

        &:nth-child(4n+4) {

          @include themify($themes) {
            background-color: transparent;
          }
        }

        .status {

          .confirmation {

            @include themify($themes) {
              background-color: themed(progressBarBackgroundColor);
            }

            .fill {

              @include themify($themes) {
                background-color: themed(progressBarFullBackgroundColor);
              }
            }
          }
        }

        .lock-transaction {

          @include themify($themes) {
            background-color: themed(orangeTextColor);
          }
        }

        .unlock-transaction {

          @include themify($themes) {
            background-color: themed(blueTextColor);
          }
        }

        .status.send {

          .status-transaction {

            @include themify($themes) {
              background-color: themed(redTextColor);
            }
          }
        }

        .status.received {

          .status-transaction {

            @include themify($themes) {
              background-color: themed(greenTextColor);
            }
          }
        }
      }
    }
  }
}

app-contracts {

  .wrap-table {

    .contract {

      .icon {

        &.new, &.alert {

          @include themify($themes) {
            background-color: themed(redTextColor);
          }
        }

        &.purchase, &.sell {

          @include themify($themes) {
            background-color: themed(blueTextColor);
          }
        }
      }
    }
  }
}

app-purchase {

  .form-purchase {

    .purchase-select {

      @include themify($themes) {
        color: themed(mainTextColor);
      }

      .icon {

        @include themify($themes) {
          background-color: themed(blueTextColor);
        }
      }
    }

    .purchase-states {

      @include themify($themes) {
        color: themed(blueTextColor);
      }
    }

    .additional-details {

      @include themify($themes) {
        border: 0.2rem solid themed(transparentButtonBorderColor);
      }
    }
  }

  .progress-bar-container {

    .progress-bar {

      @include themify($themes) {
        background-color: themed(progressBarBackgroundColor);
      }

      .progress-bar-full {

        @include themify($themes) {
          background-color: themed(progressBarFullBackgroundColor);
        }
      }
    }
  }
}

app-messages {

  table {

    tbody {

      tr {

        td:first-child {

          span {
            @include text-truncate;
          }

          .icon {

            @include themify($themes) {
              background-color: themed(redTextColor);
            }
          }
        }
      }
    }
  }
}

app-typing-message {

  .head {

    .interlocutor {

      @include themify($themes) {
        color: themed(blueTextColor);
      }
    }
  }

  .messages-content {

    .messages-list {

      div {

        &.date {

          @include themify($themes) {
            color: themed(optionalTextColor);
          }
        }

        &.my {

          @include themify($themes) {
            background-color: themed(messageMyBackgroundColor);
          }

          &:before {

            @include pseudo;
            top: 0;
            left: -1.1rem;
            border: 1.2rem solid transparent;

            @include themify($themes) {
              border-top-color: themed(messageMyBackgroundColor);
            }
          }
        }

        &.buddy {

          @include themify($themes) {
            background-color: themed(messageBuddyBackgroundColor);
          }

          &:after {

            @include pseudo;
            right: -1.1rem;
            top: 0;
            border: 1.2rem solid transparent;

            @include themify($themes) {
              border-top-color: themed(messageBuddyBackgroundColor);
            }
          }
        }
      }
    }
  }
}

app-staking {

  .chart-header {

    .general {

      .label {

        @include themify($themes) {
          color: themed(optionalTextColor);
        }
      }

      .options {

        @include themify($themes) {
          color: themed(mainTextColor);
        }
      }
    }

    .selected {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-grow: 1;
      font-size: 1.6rem;
    }
  }

  .chart-options {

    .title {

      @include themify($themes) {
        color: themed(optionalTextColor);
      }
    }

    .options {

      button {

        @include themify($themes) {
          color: themed(mainTextColor);
          background-color: themed(chartOptionsBackgroundColor);
        }

        &.active {

          @include themify($themes) {
            background-color: themed(chartOptionsHoverColor);
          }
        }
      }
    }
  }
}

.input-block-alias {
  position: relative;

  .alias-dropdown {
    position: absolute;
    top: 6.5rem;
    max-height: 10rem;
    overflow: auto;
    width: 100%;

    @include themify($themes) {
      background-color: themed(inputBackgroundColor);
      color: themed(mainTextColor);
    }

    div {
      font-size: 1.4rem;
      padding: 1rem;

      &:hover {
        @include themify($themes) {
          background-color: themed(selectHoverColor);
        }
      }
    }
  }
}
