#uphold_status {
  #uphold_status_display {
    vertical-align: top;
    margin-bottom: 5px;
  }

  .status-summary {
    font-size: 14px;

    .text {
      display: inline-block;

      &:before {
        content: "\25CF\00a0";
      }
    }

    .action {
      display: inline-block;
      margin-left: 15px;

      .disconnect-uphold {
        color: $braveText-4;
      }
    }
  }

  .field {
    margin: $spacer * 0.4 0;

    label {
      display: inline-block;
      margin: 0;
    }

    .value {
      display: inline-block;
      margin-left: 11px;
    }

    .action {
      display: inline-block;
      margin-left: 11px;
    }
  }

  #uphold_check_balance {
    margin-top: 2rem;
  }

  &.uphold-timeout {
    .status-summary .action,
    #uphold_dashboard,
    #uphold_connect,
    #last_settlement,
    .statements-available {
      display: none;
    }
  }

  &.uphold-complete,
  &.uphold-processing {
    .status-summary .action .connect-uphold,
    #uphold_connect {
      display: none;
    }
  }

  &.uphold-processing {
    #uphold_dashboard,
    #last_settlement,
    .statements-available {
      display: none;
    }
  }

  &.uphold-complete {
    .statements-unavailable {
      display: none;
    }
  }

  &.uphold-restricted,
  &.uphold-reauthorization-needed,
  &.uphold-unconnected {
    .status-description {
      background-position: left;
      background-repeat: no-repeat;
      background-size: 30px;
      background-image: url(asset-path("icn-warning@1x.png"));
      padding: 0 0 0 48px;
      margin: 0 0 24px;
      font-size: 14px;
    }

    #uphold_connect {
      margin-top: 30px;
    }

    #uphold_dashboard,
    #last_settlement,
    .statements-available {
      display: none;
    }
  }

  &.uphold-reauthorization-needed,
  &.uphold-unconnected {
    .status-summary .action .disconnect-uphold,
    .reconnect-instructions {
      display: none;
    }
  }

  &.uphold-restricted {
    .status-summary .action .connect-uphold,
    .reconnect-instructions {
      display: none;
    }

    .status-summary,
    #reconnect_to_uphold {
      display: none;
    }

    .status-summary,
    #go_to_uphold {
      /* (Albert Wang): We add lot"s of crazy complexity by disabling HTML elements */
      display: inline !important;
    }
  }

  // Status summary label
  &.uphold-complete,
  &.uphold-restricted,
  &.uphold-blocked,
  &.uphold-processing {
    .status-summary .text {
      color: darken(#2aeaa1, 10%);
    }
  }

  &.uphold-reauthorization-needed,
  &.uphold-timeout {
    .status-summary .text {
      color: $braveRed;
    }
  }

  &.uphold-unconnected {
    .status-summary .text {
      color: $braveGray-6;
    }
  }

  &.uphold-processing {
    .status-summary .text {
      animation: blinker 1s linear infinite;
    }
  }
}

.not-verified {
  color: $braveGray-6;

  img {
    filter: grayscale(100%);
  }
  a {
    color: $braveGray-6;
  }
}

.payout-progress {
  display: flex;
  align-items: center;

  .icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;

    &.active {
      background: $braveBrand;
    }

    &.inactive {
      border: 1px solid $braveGray-8;
    }

    &.animated {
      animation: colorchange 3s linear infinite;

      @keyframes colorchange {
        0% {
          background: $braveBrand;
        }
        50% {
          background: $braveBrand-Light;
        }
        100% {
          background: $braveBrand;
        }
      }
    }
  }

  progress {
    width: auto;
    flex-grow: 1;
    height: 1px;
    background: $braveGray-8;
    -webkit-appearance: none;
  }
  progress::-webkit-progress-bar {
    background: $braveGray-8;
  }
  progress::-webkit-progress-value {
    background: $braveBrand;
  }
}


.dashboard-panel--header {
  font-size: 28px;
  color: #5e6175;
  font-weight: bold;
}
