.param-secret {
  .oauth-connect-parameter {
    padding-bottom: 1rem;
    border-bottom: 1px solid $Vlight-gray;
    text-align: left;

    button.connect {
      @include action-button;
      @include button-orange;
      display: inline-block;
    }

    button.disconnect {
      @include info-1;
      @include action-link;
      background: transparent;
      color: $brand-orange;
      &:hover {
        color: $dark-orange;
      }
    }

    .secret-name {
      @include info-1;
      margin: 0;
      font-weight: normal;
    }
  }

  .secret-string-input {
    display: flex; // <input> next to <button>

    input {
      display: block;
      flex: 1 1 auto;
      @include module-parameter;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    button {
      flex: 0 0 auto;
      @include action-button;
      @include button-orange;
      border-radius: 0;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }

  .secret-string-display {
    display: flex; // <time> next to <button>

    time {
      display: block;
      flex: 1 1 auto;
      @include module-parameter;
      color: $text-muted; // user can't edit it
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    button {
      flex: 0 0 auto;
      @include action-button;
      @include button-gray;
      border-radius: 0;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
    }
  }

  .not-owner {
    // either OAuth or String
    @include info-1;
    margin: 0;
    font-weight: normal;
  }
}
