.payout-methods-container {
  margin-bottom: 40px;

  .payout-method-block {
    border: 2px solid $light-mint;
    border-radius: 4px;
    padding: 18px 12px 17px 12px;

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

    &.open {
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    }

    .payout-body {
      padding-left: 4px;
      padding-right: 4px;
    }

    .payout-card {
      line-height: 20px;
      position: relative;
      display: flex;
      align-items: center;

      .radio-button {
        margin-right: 0;
        margin-left: 0;
        float: left;
        height: 20px;
        line-height: 20px;
      }

      .brand-icon {
        width: 60px;
        height: 38px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: inline-block;
        margin-right: 12px;
      }

      .right-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        &.has-delete {
          right: 80px;
        }
        &.is-delete {
          right: 12px;
          font-size: 20px;
          padding: 0 0 .2em 0;
          border: 2px solid $rose;
          background-color: white;
          border-radius: 4px;
          width: 40px;
          height: 40px;
          i.material-icons {
            color: $rose;
          }
          &:hover {
            background-color: $rose;
            i.material-icons {
              color: white;
            }
          }
        }
      }

      .billing-name {
        display: none;
        text-transform: uppercase;
        color: $charcoal;
        font-size: (14em / 16);
        line-height: (17em / 14);
        font-weight: 700;
        margin-right: 16px;
        @include breakpoint(medium up) {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          margin-left: 12px;
        }
      }

      .account-number {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        margin-right: 12px;
      }

      .expand-accordion {
        display: inline-block;;
        white-space: nowrap;
        text-transform: uppercase;
        font-weight: 700;
        margin-left: auto;
        font-size: (14em / 16);
        line-height: (25em / 14);
        color: $charcoal;

        &:focus {
          outline: none;
        }

        &.mint {
          span {
            color: $mint;
          }

          .expand-icon {
            color: $mint;
          }
        }
      }
    }
  }
}